/* ============================================================
   VendorsHub theme v3 — "Patola Bazaar" (2026-10-14)
   Loaded LAST on every page. It re-points every colour/font token
   used by the website, app, vendor pages and shared components, then
   restyles the signature pieces:
     • indigo night hero woven with a patola diamond lattice + kites
     • marigold (action) and kite pink (requests / accents)
     • category tiles as bright shop shutters
     • vendor cards as painted shop signboards (colour = vendor type)
   Type: Bricolage Grotesque (display) + Hind Vadodara (body; Latin,
   ગુજરાતી; named after Vadodara). Light theme only, by design.
   Only looks change here: no ids, handlers or features depend on it.
   ============================================================ */
:root{
  /* palette */
  --p-indigo-950:#120D33; --p-indigo-900:#1A1446; --p-indigo-800:#2A2170; --p-indigo-700:#3A2F92; --p-indigo-600:#4A3FB0;
  --p-marigold:#FFB000; --p-marigold-300:#FFD066; --p-marigold-100:#FFF3D6; --p-marigold-ink:#8A5A00;
  --p-kite:#D92A63; --p-kite-ink:#C0185A; --p-kite-100:#FDE4EE;
  --p-leaf:#0B7A57; --p-page:#F6F5FB; --p-page-2:#EEECF7; --p-line:#E3E0F0;
  --p-ink:#16122E; --p-ink-2:#4B4767; --p-ink-3:#5F5B7D;
  --p-shadow:0 1px 0 rgba(26,20,70,.05),0 12px 32px -14px rgba(26,20,70,.28);
  --p-shadow-lg:0 30px 70px -30px rgba(18,13,51,.55);
  /* signboard colours (white text passes WCAG AA on all) */
  --sb-1:#2A2170; --sb-2:#C8285F; --sb-3:#0B7A57; --sb-4:#A85600; --sb-5:#3451D1; --sb-6:#7B2CBF; --sb-7:#B83A0E; --sb-8:#0F6E66;
  /* patola lattice tiles */
  --p-lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 6L50 28 28 50 6 28Z' fill='none' stroke='%23382D8C' stroke-width='2'/%3E%3Cpath d='M28 18L38 28 28 38 18 28Z' fill='%23251B63'/%3E%3Cpath d='M0 0h7L0 7zM56 0v7L49 0zM0 56v-7l7 7zM56 56h-7l7-7z' fill='%23FFB000' fill-opacity='.55'/%3E%3Cpath d='M28 25.5l2.5 2.5-2.5 2.5-2.5-2.5z' fill='%23E8336F'/%3E%3C/svg%3E");
  --p-lattice-faint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 6L50 28 28 50 6 28Z' fill='none' stroke='%232F2580' stroke-width='1.5'/%3E%3Cpath d='M0 0h6L0 6zM56 0v6L50 0zM0 56v-6l6 6zM56 56h-6l6-6z' fill='%23FFB000' fill-opacity='.3'/%3E%3C/svg%3E");
  --p-tail:repeating-linear-gradient(90deg,var(--p-marigold) 0 22px,var(--p-kite) 22px 44px,var(--p-indigo-600) 44px 66px,#0B9E6E 66px 88px);

  /* shared design-system tokens (css/vh-ui.css) */
  --vh-navy-950:var(--p-indigo-950); --vh-navy-900:var(--p-indigo-900); --vh-navy-800:var(--p-indigo-800); --vh-navy-600:var(--p-indigo-600);
  --vh-gold-500:var(--p-marigold); --vh-gold-300:var(--p-marigold-300); --vh-gold-100:var(--p-marigold-100);
  --vh-cream-50:var(--p-page); --vh-cream-100:var(--p-page-2); --vh-line:var(--p-line);
  --vh-ink:var(--p-ink); --vh-ink-2:var(--p-ink-2); --vh-ink-3:var(--p-ink-3);
  --vh-ok:var(--p-leaf); --vh-surface-2:var(--p-page); --vh-surface-3:var(--p-page-2);
  --vh-shadow-1:0 1px 2px rgba(26,20,70,.06),0 4px 14px -6px rgba(26,20,70,.16); --vh-shadow-2:var(--p-shadow); --vh-shadow-3:var(--p-shadow-lg);
  --vh-r-lg:22px; --vh-r-xl:28px;
  /* website tokens (index.html) */
  --navy-950:var(--p-indigo-900); --navy-800:var(--p-indigo-800); --navy-700:var(--p-indigo-700); --navy-600:var(--p-indigo-600);
  --gold-500:var(--p-marigold); --gold-300:var(--p-marigold-300); --gold-100:var(--p-marigold-100);
  --coral-600:var(--p-kite-ink); --coral-500:var(--p-kite); --coral-100:var(--p-kite-100);
  --teal-600:var(--p-leaf); --cream-50:var(--p-page); --cream-100:var(--p-page-2);
  --ink-900:var(--p-ink); --slate-500:var(--p-ink-2); --slate-300:#A8A4C4; --verified:var(--p-leaf);
  --shadow-sm:var(--vh-shadow-1); --shadow-md:var(--p-shadow); --shadow-lg:var(--p-shadow-lg); --radius:20px; --radius-lg:26px;
  /* app tokens (app.html) */
  --navy:var(--p-indigo-900); --navyL:var(--p-indigo-800); --gold:var(--p-marigold); --goldL:var(--p-marigold-300);
  --cream:var(--p-page-2); --bg:var(--p-page); --slate:var(--p-ink-2); --slateL:#C9C3F5; --coral:var(--p-kite); --teal:var(--p-leaf);
  --e1:var(--vh-shadow-1); --e2:var(--p-shadow); --e3:var(--p-shadow-lg);
}

/* ---------- base ---------- */
body{font-family:var(--vh-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--p-marigold);color:var(--p-indigo-950)}
h1,h2,h3,h4{font-family:var(--vh-font-display);letter-spacing:-.02em}
:focus-visible{outline-color:var(--p-kite)}
.vh-focusable:focus-visible,.vh-chip button:focus-visible,.vh-mic:focus-visible,.vh-example:focus-visible,.vh-btn:focus-visible,
.vh-heart:focus-visible,.vh-seg button:focus-visible{outline-color:var(--p-kite)}
html{scrollbar-color:var(--p-indigo-700) var(--p-page)}
::-webkit-scrollbar-track{background:var(--p-page)}
::-webkit-scrollbar-thumb{background:var(--p-indigo-700);border-color:var(--p-page)}
/* every section is readable without scrolling animations (fixes the empty "How it works" block) */
.reveal-up{opacity:1;transform:none}
.cursor-ring{border-color:rgba(232,51,111,.55)!important;background:rgba(232,51,111,.06)!important}
.cursor-dot{background:var(--p-kite)!important}

/* ---------- shared components ---------- */
.vh-btn-primary{background:var(--p-indigo-900)}
.vh-btn-primary:hover{background:var(--p-indigo-700)}
.vh-seg button[aria-pressed="true"]{background:var(--p-indigo-900)}
.vh-req-cta{background:var(--p-kite);color:#fff;border-radius:20px;padding:14px 16px;font-weight:600;
  box-shadow:0 14px 30px -14px rgba(232,51,111,.8);transition:transform .18s var(--vh-ease)}
.vh-req-cta:hover{transform:translateY(-2px)}
.vh-req-cta b{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px}
.vh-example{border-color:rgba(255,208,102,.4);background:rgba(255,255,255,.08)}
.vh-example:hover{background:rgba(255,208,102,.2)}
.vh-examples.on-light .vh-example{background:#fff;border-color:var(--p-line);color:var(--p-indigo-900)}
.vh-examples.on-light .vh-example:hover{background:var(--p-marigold-100)}
.vh-card,.vh-offer-card{border-radius:20px}
.vh-offer-card{border-top:5px solid var(--p-marigold)}

/* ---------- website: page loader + header ---------- */
.page-loader{background:var(--p-lattice) center/56px,var(--p-indigo-900)}
.loader-glow{background:radial-gradient(circle,rgba(255,176,0,.35) 0%,transparent 70%)}
.loader-bar-fill{background:var(--p-tail)}
header.site{background:rgba(26,20,70,.97)}
header.site::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--p-tail);opacity:0;transition:opacity .25s}
header.site.scrolled::after{opacity:1}
.brand-text .name{font-family:var(--vh-font-display);font-size:21px;letter-spacing:-.03em}
.brand-text .tag{color:var(--p-marigold-300)}
.btn-primary{background:var(--p-marigold);color:#241500;box-shadow:0 8px 22px -10px rgba(255,176,0,.9)}
.btn-primary:hover{background:#FFC13A;box-shadow:0 12px 28px -10px rgba(255,176,0,1)}
.btn-dark{background:var(--p-indigo-900)}
.btn-ghost{border-color:var(--p-line);color:var(--p-indigo-900)}
.btn-ghost:hover{border-color:var(--p-indigo-700)}

/* ---------- website: hero ---------- */
.hero.hero-v3{background:var(--p-indigo-900);padding:46px 0 96px;isolation:isolate}
.hero-v3 .hero-lattice{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,var(--p-indigo-900) 0%,rgba(26,20,70,.92) 38%,rgba(26,20,70,.35) 75%,rgba(26,20,70,.15) 100%),
  var(--p-lattice) 0 0/56px 56px}
.hero-v3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--p-tail);z-index:0}
.hero-v3 .hero-grid{grid-template-columns:1.25fr .75fr;align-items:center}
.hero-v3 .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,208,102,.35);color:var(--p-marigold-300)}
.hero-v3 h1{font:800 clamp(40px,6.6vw,84px)/.96 var(--vh-font-display);letter-spacing:-.04em;margin-bottom:14px;text-wrap:balance}
.hero-v3 h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--p-marigold);position:relative;white-space:nowrap}
.hero-v3 h1 span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.04em;height:.14em;background:var(--p-kite);border-radius:6px;transform:skewX(-14deg);z-index:-1}
.hero-v3 h1 .hero-gu{display:block;margin-top:14px;font:700 clamp(20px,2.7vw,32px)/1.25 var(--vh-font);letter-spacing:0;color:var(--p-marigold-300)}
.hero-v3 p.lead{color:#CFCAF2;font-size:clamp(15px,1.5vw,17px)}
.hero-v3 p.lead em{color:#fff}
.hero-v3 .city-toggle{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.hero-v3 .city-toggle button{color:#D9D4FF}
.hero-v3 .city-toggle button.active{background:#fff;color:var(--p-indigo-900)}
.hero-v3 .search-box{max-width:640px;border-radius:22px;padding:8px 8px 8px 20px;box-shadow:0 26px 60px -24px rgba(0,0,0,.75),0 0 0 5px rgba(255,255,255,.14)}
.hero-v3 .search-box input{font-size:17px;padding:14px 0}
.hero-v3 .search-box .btn{background:var(--p-indigo-900);color:#fff;border-radius:16px;padding:14px 26px;box-shadow:none}
.hero-v3 .search-box .btn::after{display:none}
.hero-v3 .search-box .btn:hover{background:var(--p-indigo-700)}
.hero-v3 .vh-req-cta{max-width:640px!important}
.hero-v3 .btn-outline{border-color:rgba(255,255,255,.35)}
/* kites + signboards (decorative; numbers inside are the real live counts) */
.hero-v3 .hero-art{position:relative;min-height:440px;display:block}
.hero-kite{position:absolute;aspect-ratio:1;border-radius:7px;transform:rotate(45deg);animation:pKite 7s ease-in-out infinite;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.hero-kite::before{content:"";position:absolute;inset:0;border-radius:inherit;background:
  linear-gradient(90deg,transparent 48.5%,rgba(255,255,255,.6) 48.5% 51.5%,transparent 51.5%),
  linear-gradient(0deg,transparent 48.5%,rgba(255,255,255,.6) 48.5% 51.5%,transparent 51.5%)}
.hero-kite.k1{width:118px;background:var(--p-kite);right:8%;top:0}
.hero-kite.k2{width:82px;background:var(--p-marigold);right:58%;top:12%;animation-delay:-2.3s}
.hero-kite.k3{width:62px;background:#3B6CFF;right:36%;top:30%;animation-delay:-4.6s}
.hero-string{position:absolute;right:13%;top:118px;width:2px;height:150px;background:linear-gradient(rgba(255,255,255,.55),transparent);transform:rotate(18deg);transform-origin:top}
@keyframes pKite{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -16px;rotate:7deg}}
.hero-board{position:absolute;color:#fff;border-radius:18px;padding:16px 18px 20px;min-width:180px;box-shadow:0 26px 50px -22px rgba(0,0,0,.7)}
.hero-board::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:radial-gradient(circle at 7px 0,transparent 7px,var(--p-indigo-900) 7.5px) 0 0/14px 14px repeat-x}
.hero-board b{display:block;font:800 40px/1 var(--vh-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-board small{display:block;margin-top:6px;font:600 13.5px/1.3 var(--vh-font);opacity:.92;max-width:22ch}
.hero-board .hb-k{display:inline-block;margin-bottom:8px;background:#fff;color:var(--p-ink);font:700 10.5px var(--vh-font);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.hero-board.b1{background:var(--sb-1);left:0;top:150px;transform:rotate(-4deg);border:2px solid rgba(255,255,255,.18)}
.hero-board.b2{background:var(--sb-2);right:0;top:220px;transform:rotate(3deg)}
.hero-board.b3{background:var(--sb-3);left:18%;top:330px;transform:rotate(-1.5deg)}
@media (prefers-reduced-motion:reduce){.hero-kite{animation:none}}
@media (max-width:860px){
  .hero.hero-v3{padding:30px 0 70px}
  .hero-v3 .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-v3 .hero-art{display:none}
  .hero-v3 .hero-lattice{background:linear-gradient(180deg,rgba(26,20,70,.55),var(--p-indigo-900) 85%),var(--p-lattice) 0 0/56px 56px}
}
@media (max-width:480px){
  .hero-v3 h1{font-size:44px}
  .hero-v3 .search-box{border-radius:18px;padding:10px}
  .hero-v3 .search-box .btn{border-radius:12px}
}

/* ---------- website: live numbers strip (floats over the hero edge) ---------- */
.stats-bar{background:transparent;border:0;clip-path:none;padding:0;margin-top:-46px;position:relative;z-index:3}
.stats-bar .stats-inner{width:min(1140px,calc(100% - 32px));padding:18px 10px;background:#fff;border-radius:24px;box-shadow:var(--p-shadow-lg)}
.stats-bar .stat{color:var(--p-ink);border-right-color:var(--p-line)}
.stats-bar .stat-icon{background:var(--p-marigold-100);border:0;color:var(--p-indigo-800)}
.stats-bar .stat .num{color:var(--p-indigo-900);font:800 28px/1 var(--vh-font-display);letter-spacing:-.02em}
.stats-bar .stat .lbl{color:var(--p-ink-2);font-size:13px}

/* ---------- website: explore + filters ---------- */
.filters{background:transparent;border:0;padding:30px 0 10px}
.explore-heading{text-align:left;padding-top:14px}
.explore-heading h2{font:800 clamp(30px,4vw,44px)/1.05 var(--vh-font-display);letter-spacing:-.035em;color:var(--p-ink)}
.explore-heading p{font-size:15px;color:var(--p-ink-2);margin-top:6px}
.gold-divider{display:none}
.section-eyebrow,.explore-heading .section-eyebrow{color:var(--p-kite-ink);font-size:12.5px;letter-spacing:.14em}
.how-it-works .explore-heading,.how-it-works .explore-heading p{text-align:left}
.filters-row{margin-top:18px}
.select-field,.dropdown-btn{background:#fff;border:1.5px solid var(--p-line);border-radius:14px;color:var(--p-ink)}
.select-field:focus{outline-color:var(--p-kite)}
.chip-btn{border-color:var(--p-line);color:var(--p-ink-2)}
.chip-btn.active{background:var(--p-indigo-900);border-color:var(--p-indigo-900)}
.chip-btn.chip-more{border-color:var(--p-kite);color:var(--p-kite-ink)}
.chip-btn.chip-more:hover{background:var(--p-kite-100);color:var(--p-kite-ink);border-color:var(--p-kite)}
.cat-chip.active{background:var(--p-marigold);border-color:var(--p-marigold);color:#241500}
/* category tiles = shop shutters */
.cat-tile-row{gap:12px;padding:20px 2px 16px}
.cat-tile-row .cat-tile{width:138px;min-height:134px;align-items:flex-start;justify-content:space-between;text-align:left;gap:12px;border:0;border-radius:20px;
  padding:14px;background:var(--t,var(--sb-1));position:relative;overflow:hidden;box-shadow:0 12px 26px -16px rgba(26,20,70,.8)}
.cat-tile-row .cat-tile::after{content:"";position:absolute;right:-20px;bottom:-20px;width:72px;height:72px;transform:rotate(45deg);border:10px solid rgba(255,255,255,.16);border-radius:10px;pointer-events:none}
.cat-tile-row .cat-tile:nth-child(8n+1){--t:var(--sb-1)} .cat-tile-row .cat-tile:nth-child(8n+2){--t:var(--sb-2)}
.cat-tile-row .cat-tile:nth-child(8n+3){--t:var(--sb-3)} .cat-tile-row .cat-tile:nth-child(8n+4){--t:var(--sb-4)}
.cat-tile-row .cat-tile:nth-child(8n+5){--t:var(--sb-5)} .cat-tile-row .cat-tile:nth-child(8n+6){--t:var(--sb-6)}
.cat-tile-row .cat-tile:nth-child(8n+7){--t:var(--sb-7)} .cat-tile-row .cat-tile:nth-child(8n+8){--t:var(--sb-8)}
.cat-tile-row .cat-tile.more{--t:var(--p-ink)}
.cat-tile-row .cat-tile:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 18px 30px -16px rgba(26,20,70,.9)}
.cat-tile-row .cat-tile-logo,.cat-tile-row .cat-tile-logo[class*="tile-"]{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);border:0;font-size:22px}
.cat-tile-row .cat-tile:hover .cat-tile-logo{border:0}
.cat-tile-row .cat-tile-label,.cat-tile-row .cat-tile.active .cat-tile-label{color:#fff;font:700 14px/1.2 var(--vh-font-display);letter-spacing:-.01em;position:relative;z-index:1}
.cat-tile-row .cat-tile.active{outline:4px solid var(--p-marigold);outline-offset:2px}
.cat-tile-row .cat-tile.active .cat-tile-logo{background:rgba(255,255,255,.3);box-shadow:none;border:0}

/* ---------- vendor cards = painted shop signboards ---------- */
.vcard,.card[data-type]{--sb:var(--sb-1)}
[data-type="Product"]{--sb:var(--sb-5)} [data-type="Food"]{--sb:var(--sb-4)} [data-type="Professional"]{--sb:var(--sb-6)}
[data-type="Rental"]{--sb:var(--sb-8)} [data-type="Real Estate"]{--sb:var(--sb-2)}
/* a bazaar street is multicoloured: cards in a list cycle through the signboard colours */
#vendorGrid .vcard:nth-child(6n+1),#homeVendors .card:nth-child(6n+1),#searchResults .card:nth-child(6n+1){--sb:var(--sb-1)}
#vendorGrid .vcard:nth-child(6n+2),#homeVendors .card:nth-child(6n+2),#searchResults .card:nth-child(6n+2){--sb:var(--sb-2)}
#vendorGrid .vcard:nth-child(6n+3),#homeVendors .card:nth-child(6n+3),#searchResults .card:nth-child(6n+3){--sb:var(--sb-3)}
#vendorGrid .vcard:nth-child(6n+4),#homeVendors .card:nth-child(6n+4),#searchResults .card:nth-child(6n+4){--sb:var(--sb-4)}
#vendorGrid .vcard:nth-child(6n+5),#homeVendors .card:nth-child(6n+5),#searchResults .card:nth-child(6n+5){--sb:var(--sb-5)}
#vendorGrid .vcard:nth-child(6n+6),#homeVendors .card:nth-child(6n+6),#searchResults .card:nth-child(6n+6){--sb:var(--sb-6)}
.vcard{border:0;border-radius:22px;box-shadow:var(--p-shadow);background:#fff}
.vcard::before{display:none}
.vcard:hover{box-shadow:0 22px 44px -22px rgba(26,20,70,.55)}
.vcard .vcard-top{background:var(--sb);color:#fff;padding:16px 16px 20px;margin-bottom:4px;position:relative}
.vcard .vcard-top::after,.card[data-type] .card-top::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;
  background:radial-gradient(circle at 7px 0,transparent 7px,#fff 7.5px) 0 0/14px 14px repeat-x}
.vcard .vcard-title{color:#fff;font:800 18px/1.15 var(--vh-font-display);letter-spacing:-.02em;white-space:normal}
.vcard .vcard-owner{color:rgba(255,255,255,.85)}
.vcard .vcard-photo{border:2px solid rgba(255,255,255,.4);box-shadow:0 6px 16px -8px rgba(0,0,0,.6);border-radius:14px}
.vcard .cat-badge,.card[data-type] .cat-badge{background:rgba(255,255,255,.2);color:#fff;text-transform:none;letter-spacing:0;font-size:11.5px}
.vcard .demo-badge{background:#fff;color:var(--p-ink)}
.vcard .vcard-desc{color:var(--p-ink-2);font-size:14px;padding-top:12px}
.vcard .vcard-area{color:var(--p-ink-2)}
.vcard .vh-heart,.card[data-type] .vh-heart{border-color:transparent;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.discount-badge,.disc-badge{background:var(--p-marigold);color:#241500;box-shadow:0 8px 18px -8px rgba(0,0,0,.6);transform:rotate(3deg)}
.icon-btn{border-radius:12px;padding:11px 8px;font-size:12.5px}
.icon-btn.call{background:var(--p-indigo-900)} .icon-btn.call:hover{background:var(--p-indigo-700)}
.icon-btn.map{background:var(--p-page-2);color:var(--p-indigo-900)} .icon-btn.map:hover{background:#E2DFF2}
.sample-contact-note,.sample-note{background:var(--p-page-2);color:var(--p-ink-2);border-radius:12px}
.demo-banner{background:var(--p-marigold-100);border-color:#F5D58A;color:var(--p-ink)}
.results-bar h2{font:800 clamp(24px,3vw,32px)/1.1 var(--vh-font-display);letter-spacing:-.03em;color:var(--p-ink)}
.grid{gap:20px}

/* ---------- website: lower sections ---------- */
.cat-marquee{background:var(--p-kite);border:0;padding:12px 0}
.cat-marquee-track span{color:#fff;font-family:var(--vh-font-display);font-size:14px}
.cat-marquee-track span::after{content:"◆";color:rgba(255,255,255,.6)}
.why-strip{background:transparent;border:0;padding:34px 0 10px}
.why-inner{gap:14px}
.why-card{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--vh-shadow-1)}
.why-icon{border-radius:14px;box-shadow:none}
.why-icon-gold{background:var(--p-marigold);color:var(--p-indigo-950)}
.why-icon-teal{background:var(--p-leaf);color:#fff}
.why-icon-coral{background:var(--p-kite);color:#fff}
.why-icon-navy{background:var(--p-indigo-900);color:var(--p-marigold-300)}
.why-title{font-family:var(--vh-font-display);font-size:15px;color:var(--p-ink)}
.why-sub{font-size:13px;color:var(--p-ink-2)}
.how-it-works{background:transparent;border:0;padding:40px 0 48px}
.hiw-row::before{background:repeating-linear-gradient(90deg,var(--p-kite) 0 10px,transparent 10px 20px);opacity:.5}
.hiw-step{border:0;border-radius:24px;box-shadow:var(--vh-shadow-1);text-align:left;padding:28px 22px 24px}
.hiw-num{margin:0 0 14px;border-radius:12px;width:40px;height:40px;font:800 18px var(--vh-font-display);box-shadow:0 0 0 6px var(--p-page)}
.hiw-num-gold{background:var(--p-marigold);color:var(--p-indigo-950)}
.hiw-num-teal{background:var(--p-leaf)}
.hiw-num-coral{background:var(--p-kite)}
.hiw-step h3{font-size:19px;color:var(--p-ink)}
.hiw-step p{font-size:14.5px;color:var(--p-ink-2)}
.cta-band{background:linear-gradient(100deg,var(--p-indigo-900) 30%,rgba(26,20,70,.6)),var(--p-lattice) 0 0/56px 56px;border-top:6px solid transparent;border-image:var(--p-tail) 1}
.cta-band-glow{background:radial-gradient(circle,rgba(232,51,111,.45) 0%,transparent 70%)}
.cta-band-text h2{font:800 clamp(26px,3.4vw,40px)/1.08 var(--vh-font-display);letter-spacing:-.03em}
.cta-band-text p{color:#CFCAF2;font-size:15px}
footer.site{background:var(--p-indigo-950);margin-top:0;border-top:6px solid transparent;border-image:var(--p-tail) 1}
footer.site p,footer.site a{color:#B9B3E6}
footer.site a:hover{color:var(--p-marigold-300)}
.social-icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.footer-bottom{color:#9A94CC;border-top-color:rgba(255,255,255,.1)}
.modal{border-radius:24px}
.modal-head{box-shadow:0 3px 0 0 var(--p-marigold)}
.modal-close{background:var(--p-page-2)}
.toast{background:var(--p-indigo-900);border-radius:14px}
.admin-topbar{background:var(--p-indigo-900);border-bottom:4px solid transparent;border-image:var(--p-tail) 1}
.a-stat,.admin-table-wrap{border-color:var(--p-line);border-radius:18px}
.qr-showcase{background:#fff;border-color:var(--p-line);box-shadow:var(--p-shadow)}

/* ---------- app (app.html) ---------- */
.vh3-app{background:var(--p-page)}
.vh3-app .topbar{background:var(--p-lattice-faint) 0 0/56px 56px,var(--p-indigo-900)}
.vh3-app .app-name{font:800 22px var(--vh-font-display);letter-spacing:-.03em}
.vh3-app .city-btn{border-color:rgba(255,255,255,.18);color:#D9D4FF;font-family:var(--vh-font)}
.vh3-app .city-btn.active{background:var(--p-marigold);border-color:var(--p-marigold);color:#241500}
.vh3-app .icon-btn-outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.vh3-app .app-hero{margin:-12px 0 14px;padding:20px 16px 24px;background:linear-gradient(180deg,var(--p-indigo-900),var(--p-indigo-800));color:#fff;
  border-radius:0 0 28px 28px;position:relative;overflow:hidden;box-shadow:0 18px 30px -22px rgba(26,20,70,.9)}
.vh3-app .app-hero::before{content:"";position:absolute;inset:0;background:var(--p-lattice-faint) 0 0/56px 56px;opacity:.7;pointer-events:none}
.vh3-app .app-hero > *{position:relative}
.vh3-app .app-hero h1{font:800 30px/1.02 var(--vh-font-display)!important;letter-spacing:-.035em;color:#fff!important;margin:0 0 4px!important}
.vh3-app .app-hero .hero-gu{display:block;font:700 18px/1.3 var(--vh-font);color:var(--p-marigold-300);margin-bottom:14px}
.vh3-app .app-hero .search-bar{border-radius:16px;padding:12px 14px;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.vh3-app .app-hero .vh-mic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.vh3-app .section-title{font:800 21px var(--vh-font-display);letter-spacing:-.03em;color:var(--p-ink);padding:18px 16px 12px}
.vh3-app .home-area label{color:var(--p-ink)}
.vh3-app .home-area select{border-color:var(--p-line);border-radius:12px}
.vh3-app .cat-scroll{gap:8px}
.vh3-app .cat-tile{--t:var(--sb-1);background:var(--t);box-shadow:0 10px 20px -14px rgba(26,20,70,.9);border-radius:18px;padding:12px 4px 10px;position:relative;overflow:hidden}
.vh3-app .cat-tile::after{content:"";position:absolute;right:-14px;bottom:-14px;width:40px;height:40px;transform:rotate(45deg);border:6px solid rgba(255,255,255,.16);border-radius:6px}
.vh3-app .cat-tile:nth-child(8n+1){--t:var(--sb-1)} .vh3-app .cat-tile:nth-child(8n+2){--t:var(--sb-2)}
.vh3-app .cat-tile:nth-child(8n+3){--t:var(--sb-3)} .vh3-app .cat-tile:nth-child(8n+4){--t:var(--sb-4)}
.vh3-app .cat-tile:nth-child(8n+5){--t:var(--sb-5)} .vh3-app .cat-tile:nth-child(8n+6){--t:var(--sb-6)}
.vh3-app .cat-tile:nth-child(8n+7){--t:var(--sb-7)} .vh3-app .cat-tile:nth-child(8n+8){--t:var(--sb-8)}
.vh3-app .cat-tile-icon-wrap{background:rgba(255,255,255,.18)!important}
.vh3-app .cat-tile-label{color:#fff;font-size:10.5px;font-weight:700;position:relative;z-index:1}
.vh3-app .card{border-radius:22px;box-shadow:var(--p-shadow);padding:0 0 14px}
.vh3-app .card > :not(.card-top):not(.disc-badge):not(.card-heart){margin-left:14px;margin-right:14px}
.vh3-app .card .card-top{background:var(--sb,var(--sb-1));color:#fff;padding:14px 14px 18px;margin-bottom:12px;position:relative}
.vh3-app .card .biz-name{color:#fff;font:800 17px/1.15 var(--vh-font-display);letter-spacing:-.02em}
.vh3-app .card .owner-name{color:rgba(255,255,255,.85)}
.vh3-app .card .avatar,.vh3-app .card .avatar-init{border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff}
.vh3-app .card .sample-badge{background:#fff;color:var(--p-ink)}
.vh3-app .btn-navy{background:var(--p-indigo-900)}
.vh3-app .btn-map{background:var(--p-page-2);border-color:var(--p-line);color:var(--p-indigo-900)}
.vh3-app .tabbar{background:#fff;border-top:1px solid var(--p-line);box-shadow:0 -10px 30px -20px rgba(26,20,70,.5)}
.vh3-app .tab{color:var(--p-ink-3)}
.vh3-app .tab.active{color:var(--p-kite-ink)}
.vh3-app .tab.active .tab-icon-wrap{background:var(--p-kite-100)}
.vh3-app .fab{background:var(--p-kite);box-shadow:0 14px 28px -12px rgba(232,51,111,.9)}
.vh3-app .fab svg{stroke:#fff}
.vh3-app .section-header{background:var(--p-lattice-faint) 0 0/56px 56px,var(--p-indigo-900)}
.vh3-app .section-header h1{font:800 26px var(--vh-font-display);letter-spacing:-.03em}
.vh3-app .search-btn,.vh3-app .submit-btn,.vh3-app .btn-gold{background:var(--p-marigold);color:#241500}
.vh3-app .chip.active{background:var(--p-indigo-900);border-color:var(--p-indigo-900)}
.vh3-app .success-screen{background:var(--p-lattice) 0 0/56px 56px,var(--p-indigo-900)}

/* ---------- vendor page (vendor.html) ---------- */
.vp-top{background:var(--p-indigo-900)}
.vp-cover{background:linear-gradient(120deg,rgba(26,20,70,.25),rgba(232,51,111,.35)),var(--p-lattice) 0 0/56px 56px,var(--p-indigo-900)}
.vp-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--p-tail)}
.vp-head,.vp-card{border:0;border-radius:24px;box-shadow:var(--p-shadow)}
.vp-avatar{background:var(--p-kite);color:#fff;border-radius:22px}
.vp-title{font-weight:800;letter-spacing:-.03em;color:var(--p-ink)}
.vp-card h2{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--p-ink)}
.vp-act{border-radius:14px}
.vp-act.call{background:var(--p-indigo-900);border-color:var(--p-indigo-900)}
.vp-offer{border-color:var(--p-marigold);background:var(--p-marigold-100)}
.vp-stars{color:#E89A00}
.vp-bar i b{background:var(--p-marigold)}
.vp-sample{background:var(--p-indigo-900)}
.vp-sample b{color:var(--p-marigold-300)}
.vh3-app .card:has(.card-heart) .card-top{padding-right:56px}
.vh3-app .card:has(.card-heart) .disc-badge{top:58px}

/* ---------- details + leftovers of the old cream palette ---------- */
.vh3-app .section-header .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.vh3-app .section-header .chip.active{background:var(--p-marigold);border-color:var(--p-marigold);color:#241500}
.vh3-app .detail-hero{background:var(--p-lattice-faint) 0 0/56px 56px,var(--p-indigo-800)}
.vh3-app .detail-overlay{background:linear-gradient(180deg,rgba(18,13,51,.35),rgba(18,13,51,.92))}
.vh3-app .detail-row,.detail-row{border-color:var(--p-line)}
.vh3-app .field input,.vh3-app .field textarea,.vh3-app .field select,.vh3-app .chip,.vh3-app .btn-map,
.field input[type=text],.field input[type=tel],.field textarea,.field select,.radio-chip,.subcat-chip,.cat-chip,
.group-row,.group-cat-item,.group-row-icon,.upload-box,.megamenu,.mm-group,.cat-tile-logo{border-color:var(--p-line)}
.field input:focus,.field textarea:focus,.field select:focus{outline-color:var(--p-kite)}
.radio-chip.active{background:var(--p-indigo-900);border-color:var(--p-indigo-900)}
.group-row:hover,.group-cat-item:hover,.subcat-chip:hover,.upload-box:hover{border-color:var(--p-kite)}
.form-section-title .n{background:var(--p-kite);color:#fff}
.modal-head{border-bottom-color:var(--p-line)}
table.a-table th{background:var(--p-page);border-color:var(--p-line)}
table.a-table td{border-color:var(--p-line)}
.vh3-app .suggest-item,.vh3-app .group-card.open .group-header{border-color:var(--p-line)}
.vh3-app .group-card{border-radius:18px}
.vh3-app .group-card .group-icon-wrap{border-radius:12px;background:color-mix(in srgb,var(--g,var(--sb-1)) 14%,#fff)}
.vh3-app .group-card:nth-child(8n+2){--g:var(--sb-2)} .vh3-app .group-card:nth-child(8n+3){--g:var(--sb-3)} .vh3-app .group-card:nth-child(8n+4){--g:var(--sb-4)}
.vh3-app .group-card:nth-child(8n+5){--g:var(--sb-5)} .vh3-app .group-card:nth-child(8n+6){--g:var(--sb-6)} .vh3-app .group-card:nth-child(8n+7){--g:var(--sb-7)}
.vh3-app .group-card:nth-child(8n+8){--g:var(--sb-8)}
.group-row-icon{background:var(--p-marigold-100);border:0}

/* ---------- layering: dropdowns are never cut off or covered (2026-10-14) ---------- */
/* hero paints its own background; its content sits above the floating numbers card,
   so the search suggestions can drop past the hero edge and over the card */
.hero.hero-v3{overflow:visible;isolation:auto}
.hero-v3 .hero-lattice,.hero-v3::after{z-index:0}
.hero-v3 .hero-grid{position:relative;z-index:4}
.vh3-app .app-hero{overflow:visible;z-index:20}
.vh3-app .app-hero::before{border-radius:inherit}
.vh-sp{z-index:80}
/* language picker wide enough for ગુ / हि */
.vh-voice-lang{min-width:58px;min-height:36px;font-size:13px;padding:6px 10px;line-height:1.2}

/* offers: a marigold ribbon across the top of the signboard (never sits on top of labels) */
.vcard .discount-badge,.vh3-app .card .disc-badge{position:static;order:-1;transform:none;border-radius:0;box-shadow:none;display:block;text-align:center;
  padding:6px 12px;font:800 12.5px/1.3 var(--vh-font);letter-spacing:.08em;margin:0}
.vcard:has(.discount-badge) .vcard-heart{top:42px}
.vh3-app .card:has(.disc-badge) .card-heart{top:40px}
.vcard:has(.vcard-heart) .discount-badge,.vh3-app .card:has(.card-heart) .disc-badge{top:auto}
/* registration: shop-pin row lays out as a tidy wrapping row */
.vh-loc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.vh-loc > .vh-muted-sm{flex:1 1 180px;min-width:0}
/* decorative layers never sit on top of buttons or catch taps */
.cta-band-glow,.hero-lattice,.hero-kite,.hero-string,.loader-glow,.grain-overlay{pointer-events:none}
.cta-band-glow{z-index:0}
.cta-band-inner{position:relative;z-index:1}
/* phones: city + area pickers share a row in two equal halves, "All Categories" gets its own row */
@media (max-width:600px){
  .filters-row .select-field{flex:1 1 calc(50% - 4px);min-width:0}
  .filters-row .dropdown-btn{flex:1 1 100%;justify-content:center}
}
/* app home: search box shrinks so the language picker + mic always fit (360px phones) */
.home-search .search-bar{min-width:0}
.home-search .vh-voice-lang{flex:none;min-width:56px;padding:6px 6px}

/* "Post a request" switched off (js/vh-core.js VH_REQUESTS_OPEN): every way in is hidden */
html:not(.vh-requests-open) .vh-req-cta,html:not(.vh-requests-open) #tab-requests,html:not(.vh-requests-open) [onclick*="vhOpenRequestForm"],
html:not(.vh-requests-open) [onclick*="requestFromSearch"],html:not(.vh-requests-open) #myRequests [data-new],html:not(.vh-requests-open) #appMyRequests [data-new]{display:none!important}

/* www.vendorshub.co.in/admin: the public site is never shown; only the admin sign-in card, then the panel */
body.vh-admin-mode #publicSite,body.vh-admin-mode header.site,body.vh-admin-mode #siteFooter,body.vh-admin-mode #ctaBand,body.vh-admin-mode .page-loader{display:none!important}
body.vh-admin-mode{background:var(--p-lattice) 0 0/56px 56px,var(--p-indigo-900);min-height:100vh}
body.vh-admin-mode:has(.admin-shell.open){background:var(--p-page)}
body.vh-admin-mode #adminLoginOverlay{background:transparent;backdrop-filter:none;align-items:center}
body.vh-admin-mode #adminLoginOverlay .modal-close{display:none}
.field input[type=email],.field input[type=password]{width:100%;border:1.5px solid var(--p-line);border-radius:10px;padding:11px 13px;background:var(--p-page);color:var(--p-ink);font:inherit}
.field input[type=email]:focus,.field input[type=password]:focus{outline:2px solid var(--p-kite);outline-offset:1px;background:#fff}
body.vh-admin-mode #adminLoginOverlay{padding:16px}
body.vh-admin-mode #adminLoginOverlay .modal{margin:auto;border-radius:24px;max-height:none}
/* message boxes stay hidden until they have something to say */
.vh-why[hidden],.vh-miss[hidden],.form-error:empty{display:none!important}

/* ---------- category icons: one line-icon set (js/vh-icons.js) instead of emoji ---------- */
.vh-ic{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.22em;flex:none}
.cat-tile-row .cat-tile-logo .vh-ic{width:26px;height:26px;color:#fff;stroke-width:1.9}
.vh3-app .cat-tile-icon-wrap .vh-ic{width:22px;height:22px;color:#fff}
.group-row-icon .vh-ic,.group-cat-icon .vh-ic{width:22px;height:22px;color:var(--p-indigo-800)}
.group-row-icon{background:var(--p-marigold-100)!important;color:var(--p-indigo-800)}
.group-cat-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--p-page-2)}
.vh-ic-title{width:26px;height:26px;color:var(--p-kite-ink);vertical-align:-6px;margin-right:4px}
.subcat-header .icon .vh-ic{width:24px;height:24px;color:#fff}
.active-cat-badge .vh-ic{color:var(--p-marigold-300)}
.vh3-app .group-icon-wrap .vh-ic{width:20px;height:20px;color:var(--g,var(--sb-1))}
.vh-sp-ic .vh-ic{width:19px;height:19px;color:var(--p-indigo-800)}
.vh3-app .chip .vh-ic{width:15px;height:15px;margin-right:3px;color:var(--p-kite-ink)}
.si-icon .vh-ic{width:18px;height:18px;color:var(--p-indigo-800)}
#activeCategoryBanner .vh-ic{width:15px;height:15px;color:var(--p-marigold-300)}
.cat-marquee-track .vh-ic{width:16px;height:16px;color:#fff}
.vh-example .vh-ic{width:15px;height:15px;margin-right:2px;color:var(--p-kite-ink)}
.vh-ic-h{width:22px;height:22px;color:var(--p-kite-ink);vertical-align:-4px;margin-right:2px}
.vh-pulse-tile .vh-ic-h{width:24px;height:24px;color:var(--p-indigo-800)}
.dropdown-btn .vh-ic{color:var(--p-kite-ink)}

/* ---------- sign-up: all three photos required ---------- */
.vh-docs-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--p-marigold-100);border:1px solid rgba(0,0,0,.06);color:var(--p-indigo-800);font-size:13.5px;line-height:1.45}

/* ---------- admin: add vendor + photos ---------- */
.vh-av-radio{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:14px;cursor:pointer}
.vh-av-current{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 8px}
.vh-av-current figure{margin:0;width:160px}
.vh-av-current img{width:160px;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(0,0,0,.08);display:block}
.vh-av-current figcaption{font-size:12px;color:var(--p-ink-3,#5B6577);margin-top:4px}

/* ---------- sample listings after the real vendors (vhSampleTopUp) ---------- */
.vh-sample-divider{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;margin:18px 0 10px;padding:12px 14px;border-radius:12px;background:var(--p-marigold-100);border:1px dashed #E7CD74;color:var(--p-indigo-800);font-size:13.5px;line-height:1.4}
.vh-sample-divider b{font-size:14.5px}
.vh3-app .vh-sample-divider,#searchResults .vh-sample-divider,#homeVendors .vh-sample-divider{margin:16px 16px 12px}

/* ---------- admin: tell the vendor their listing is live ---------- */
.vh-tell{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.vh-tell textarea{width:100%;margin:8px 0;font:inherit;font-size:14px;line-height:1.45;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);resize:vertical}
.vh-tell-btns{display:flex;gap:8px;flex-wrap:wrap}
.vh-tell-btns .vh-btn{text-decoration:none}