/* ============================================================
   VendorsHub website v4 — "bright & clean" (2026-10-29)
   Loaded after vh-theme.css on index.html and explore.html.
   White header with two clear sections (🏪 Vendors | 📷 Explore),
   a light hero with search first, short home page, and an app-like
   bottom tab bar on phones. Brand indigo + marigold stay as accents.
   Only looks change here: ids and handlers stay the same.
   ============================================================ */
:root{--s-bg:#FAFAFD;--s-card:#fff;--s-line:#ECEAF4;--s-ink:#16122E;--s-ink2:#55516F;--s-brand:#1A1446;--s-accent:#FFB000;--s-soft:#F3F1FB;
  --s-shadow:0 1px 2px rgba(22,18,46,.05),0 6px 20px -10px rgba(22,18,46,.18);--s-shadow-lg:0 18px 44px -18px rgba(22,18,46,.3);--s-bnav-h:64px}
body{background:var(--s-bg)}

/* ---------- header ---------- */
header.site{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--s-line);color:var(--s-ink)}
header.site::after{display:none}
header.site.scrolled{box-shadow:0 6px 20px -12px rgba(22,18,46,.25)}
.header-inner{max-width:1240px;margin:0 auto;flex-wrap:nowrap;gap:14px;padding:10px 20px}
header.site.scrolled .header-inner{padding:8px 20px}
.brand{color:var(--s-ink);text-decoration:none;flex:none}
.brand-text .name{color:var(--s-brand)}
.brand-text .tag{color:var(--s-ink2)}
.vh-tabs{display:flex;gap:4px;background:var(--s-soft);border-radius:999px;padding:4px;margin:0 auto}
.vh-tab{display:flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;text-decoration:none;color:var(--s-ink2);font:700 14.5px var(--vh-font);white-space:nowrap;transition:background .15s,color .15s}
.vh-tab:hover{color:var(--s-brand)}
.vh-tab.on{background:#fff;color:var(--s-brand);box-shadow:0 1px 3px rgba(22,18,46,.12)}
.header-actions{gap:8px;flex:none}
header.site .city-pill-mini{background:#fff;color:var(--s-ink);border:1px solid var(--s-line);cursor:pointer;font:600 13px var(--vh-font)}
header.site .city-pill-mini:hover{border-color:var(--s-brand)}
header.site .btn-ghost{background:#fff;border:1px solid var(--s-line);color:var(--s-ink)}
header.site .btn-ghost:hover{border-color:var(--s-brand)}
header.site .hdr-list{white-space:nowrap}
@media (max-width:1040px){.brand-text .tag{display:none}.vh-tab{padding:8px 13px}}
@media (max-width:900px){header.site .hdr-list{display:none}}
@media (max-width:760px){
  .vh-tabs{display:none}                       /* phones: the bottom tab bar takes over */
  .header-inner{justify-content:space-between}
  header.site .hdr-acct{display:none}
}

/* ---------- hero: light, centred, search first ---------- */
.hero.hero-v4{background:
    radial-gradient(900px 380px at 50% -120px,rgba(255,176,0,.16),transparent 70%),
    radial-gradient(700px 360px at 100% 0,rgba(90,70,220,.10),transparent 70%),
    linear-gradient(#fff,var(--s-bg));
  color:var(--s-ink);padding:44px 0 34px;overflow:visible;isolation:isolate}
.hero-v4 .hero-in{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-v4 .eyebrow{background:#EAF7F0;color:#0B6B4C;border:1px solid #CDEBDC;margin-bottom:14px}
.hero-v4 h1{font:800 clamp(34px,5.6vw,64px)/1.02 var(--vh-font-display);letter-spacing:-.035em;color:var(--s-brand);margin:0 0 12px;text-wrap:balance}
.hero-v4 h1 span{color:var(--s-brand);position:relative;white-space:nowrap;background:none;-webkit-text-fill-color:currentColor}
.hero-v4 h1 span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.22em;background:var(--s-accent);opacity:.55;border-radius:6px;z-index:-1}
.hero-v4 h1 .hero-gu{display:block;margin-top:10px;font:700 clamp(17px,2.2vw,24px)/1.3 var(--vh-font);letter-spacing:0;color:#8A5A00}
.hero-v4 p.lead{color:var(--s-ink2);font-size:clamp(15px,1.5vw,17px);max-width:640px;margin:0 auto 18px}
.hero-v4 p.lead em{color:var(--s-ink);font-style:normal;font-weight:600}
.hero-v4 .city-toggle{background:#fff;border:1px solid var(--s-line);box-shadow:var(--s-shadow);margin:0 auto 14px}
.hero-v4 .city-toggle button{color:var(--s-ink2)}
.hero-v4 .city-toggle button.active{background:var(--s-brand);color:#fff}
.hero-v4 .search-box{width:100%;max-width:700px;border-radius:20px;padding:7px 7px 7px 18px;background:#fff;border:1.5px solid var(--s-line);box-shadow:var(--s-shadow-lg);color:var(--s-ink)}
.hero-v4 .search-box:focus-within{border-color:var(--s-brand)}
.hero-v4 .search-box input{font-size:17px;padding:13px 0;color:var(--s-ink)}
.hero-v4 .search-box .btn{background:var(--s-brand);color:#fff;border-radius:14px;padding:13px 24px;box-shadow:none}
.hero-v4 .search-box .btn::after{display:none}
.hero-v4 .vh-examples{justify-content:center;margin-top:12px}
.hero-paths{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:760px;margin:22px auto 0}
.hero-path{flex:1 1 220px;max-width:250px}
.hero-path{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--s-line);border-radius:16px;padding:12px 14px;
  text-decoration:none;color:var(--s-ink);box-shadow:var(--s-shadow);cursor:pointer;font:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.hero-path:hover{transform:translateY(-2px);box-shadow:var(--s-shadow-lg);border-color:#D8D3EE}
.hero-path b{display:block;font:700 15px var(--vh-font-display);color:var(--s-brand)}
.hero-path small{display:block;font-size:12.5px;color:var(--s-ink2);line-height:1.3}
.hp-ic{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--s-soft)}
.vh-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:18px;color:var(--s-ink2);font-size:13.5px}
.vh-nums b{color:var(--s-brand);font:800 15px var(--vh-font-display)}
.hero-v4 .vh-req-cta,.hero-v4 .hero-art,.hero-v4 .hero-cta-row{display:none}
@media (max-width:760px){
  .hero.hero-v4{padding:24px 0 22px}
  .hero-v4 .eyebrow{font-size:12px}
  .hero-v4 p.lead{font-size:14.5px}
  .hero-v4 .search-box{padding:5px 5px 5px 14px}
  .hero-v4 .search-box .btn{padding:12px 16px}
  .hero-paths{flex-direction:column;gap:8px;margin-top:16px}
  .hero-path{padding:10px 12px;max-width:none;flex:none}
  .vh-nums{gap:4px 12px;font-size:12.5px}
  /* one row each: cities scroll sideways, search stays on one line */
  .hero-v4 .city-toggle{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;justify-content:flex-start}
  .hero-v4 .city-toggle::-webkit-scrollbar{display:none}
  .hero-v4 .city-toggle button{flex:none;padding:8px 14px}
  .hero-v4 .search-box{flex-wrap:nowrap;gap:6px;padding:5px 5px 5px 14px}
  .hero-v4 .search-box > *{order:0!important}
  .hero-v4 .search-box .vh-mic{flex:none}
  .hero-v4 .search-box input{min-width:0;flex:1;font-size:16px}
  .hero-v4 .search-box .btn{flex:none;width:auto;padding:11px 14px}
}

/* ---------- sections ---------- */
.vh-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px}
.vh-sec-head h2{font:800 clamp(22px,2.6vw,30px)/1.15 var(--vh-font-display);color:var(--s-brand);margin:0;letter-spacing:-.025em}
.vh-sec-head p{margin:4px 0 0;color:var(--s-ink2);font-size:14px}
.vh-sec-head.center{justify-content:center;text-align:center}
.vh-see-all{flex:none;font-weight:700;color:#4A3FB0;text-decoration:none;font-size:14px;padding:6px 2px}
.vh-see-all:hover{text-decoration:underline}
.filters{padding:26px 0 6px}

/* photo posts from Explore */
.vh-home-explore{margin:22px 0 8px}
.vh-hx-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:thin}
.vh-hx{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--s-line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--s-ink);box-shadow:var(--s-shadow);transition:transform .15s,box-shadow .15s}
.vh-hx:hover{transform:translateY(-2px);box-shadow:var(--s-shadow-lg)}
.vh-hx-img{position:relative;display:block;aspect-ratio:4/5;background:#EDEAF8;overflow:hidden}
.vh-hx-img img{width:100%;height:100%;object-fit:cover}
.vh-hx-demo{position:absolute;left:8px;top:8px;background:#FFD25E;color:#3D2A00;border-radius:999px;padding:4px 8px;font:800 10px var(--vh-font);letter-spacing:.03em}
.vh-hx-body{display:flex;flex-direction:column;gap:2px;padding:9px 10px 11px}
.vh-hx-body b{font:700 13.5px/1.3 var(--vh-font-display);color:var(--s-brand);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vh-hx-price{font-weight:800;color:#0E7A4D;font-size:13px}
.vh-hx-body small{color:var(--s-ink2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* how it works */
.vh-how{padding:40px 0 34px}
.vh-how-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vh-how-step{background:#fff;border:1px solid var(--s-line);border-radius:18px;padding:18px;box-shadow:var(--s-shadow)}
.vh-how-step h3{font:700 17px var(--vh-font-display);color:var(--s-brand);margin:10px 0 4px}
.vh-how-step p{margin:0;color:var(--s-ink2);font-size:14px;line-height:1.5}
.vh-how-n{display:inline-flex;width:32px;height:32px;border-radius:10px;align-items:center;justify-content:center;background:var(--s-accent);color:#241500;font:800 15px var(--vh-font-display)}
@media (max-width:420px){.hero-v4 .vh-voice-lang{display:none}}
@media (max-width:760px){.vh-how-row{grid-template-columns:minmax(0,1fr)}.vh-how{padding:28px 0 20px}}

/* "for local businesses" band: light */
.cta-band{background:linear-gradient(110deg,#FFF6DE,#FFFDF6 60%,#F3F1FB);border:0;border-image:none;color:var(--s-ink)}
.cta-band h2{color:var(--s-brand)}
.cta-band p{color:var(--s-ink2)}
.cta-band .section-eyebrow{color:#8A5A00!important}
.cta-band .cta-band-glow{display:none}
.cta-band .btn-outline{border-color:var(--s-brand);color:var(--s-brand)}

/* ---------- phone bottom tab bar (same order as the app) ---------- */
.vh-bnav{display:none}
@media (max-width:760px){
  .vh-bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--s-line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px -14px rgba(22,18,46,.3)}
  .vh-bnav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:52px;justify-content:center;
    text-decoration:none;color:var(--s-ink2);font:600 11px var(--vh-font);border-radius:12px}
  .vh-bnav a span{font-size:20px;line-height:1;filter:grayscale(1);opacity:.75}
  .vh-bnav a.on{color:var(--s-brand)}
  .vh-bnav a.on span{filter:none;opacity:1}
  body{padding-bottom:calc(var(--s-bnav-h) + env(safe-area-inset-bottom))}
  footer.site{padding-bottom:calc(24px + var(--s-bnav-h))}
}
body.vh-admin-mode .vh-bnav{display:none!important}

/* ---------- Part D: vendor cards, photo first ---------- */
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vcard.vc4{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid var(--s-line);border-radius:20px;box-shadow:var(--s-shadow);
  transition:transform .18s,box-shadow .18s;cursor:pointer}
.vcard.vc4:hover{transform:translateY(-3px);box-shadow:var(--s-shadow-lg)}
.vc-cover{position:relative;display:block;aspect-ratio:16/10;background:#EEECF7;overflow:hidden}
.vc-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.vcard.vc4:hover .vc-img{transform:scale(1.04)}
.vc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 70%)}
.vc-ph-ic{width:46px;height:46px;opacity:.95}
.vc-ph-ic svg{width:100%;height:100%;stroke:#fff}
.vc-ph b{font:800 15px var(--vh-font-display);letter-spacing:.06em;opacity:.85}
.vc-cat{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:rgba(255,255,255,.94);color:var(--s-brand);border-radius:999px;padding:4px 10px;
  font:700 11.5px var(--vh-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.vc-off{position:absolute;left:10px;top:10px;background:var(--s-accent);color:#241500;border-radius:999px;padding:4px 10px;font:800 11.5px var(--vh-font);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.vcard.vc4 .vcard-heart{top:10px;right:10px}
.vcard.vc4 .vh-heart{background:rgba(255,255,255,.95)}
.vc-body{display:flex;flex-direction:column;gap:5px;padding:12px 14px 0;flex:1}
.vcard.vc4 .vcard-title{color:var(--s-brand);font:800 17px/1.2 var(--vh-font-display);white-space:normal;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-sub{font-size:12.5px;color:var(--s-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard.vc4 .vcard-badges{margin:2px 0 0}
.vcard.vc4 .vcard-desc{padding:0;font-size:13.5px;color:var(--s-ink2);margin-top:2px}
.vcard.vc4 .vh-why,.vcard.vc4 .vh-miss{margin:2px 0 0}
.vc-veg{font:700 11.5px var(--vh-font);color:#0B6B4C}
.vcard.vc4 .vcard-actions{display:flex;flex-direction:row;gap:8px;padding:12px 14px 14px;margin-top:auto}
.vcard.vc4 .icon-btn{flex:1;display:flex;flex-direction:row;white-space:nowrap;align-items:center;justify-content:center;gap:4px;min-height:42px;border-radius:12px;font:700 13px var(--vh-font);text-decoration:none;padding:8px}
.vcard.vc4 .icon-btn.call{background:var(--s-brand);color:#fff}
.vcard.vc4 .icon-btn.wa{background:#1F9D55;color:#fff}
.vcard.vc4 .icon-btn.map{flex:0 0 44px;background:var(--s-soft);color:var(--s-brand)}
.vcard.vc4.is-sample .vc-cover{filter:saturate(.75)}
.vcard.vc4 .sample-contact-note{flex:1;text-align:center;font-size:12px;color:var(--s-ink2);background:var(--s-soft);border-radius:12px;padding:10px}
@media (max-width:760px){.grid{grid-template-columns:minmax(0,1fr);gap:14px}.vc-cover{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.vcard.vc4,.vc-img{transition:none}.vcard.vc4:hover .vc-img{transform:none}}

/* home sections: recently viewed / newly verified / new vendors — small photo tiles */
.vh-hsec{background:#fff;border:1px solid var(--s-line);border-radius:20px;padding:16px;box-shadow:var(--s-shadow);margin:14px 0}
.vh-hsec .vh-sec-h h2{color:var(--s-brand)}
.vh-hrow .vh-mini{flex:0 0 min(250px,78vw);min-width:0;overflow:hidden}
.vh-mini{display:flex;gap:10px;align-items:center;background:var(--s-bg);border:1px solid var(--s-line);border-radius:14px;padding:10px;text-decoration:none;color:var(--s-ink);transition:border-color .15s,box-shadow .15s}
.vh-mini:hover{border-color:#D8D3EE;box-shadow:var(--s-shadow)}
.vh-mini-av{width:56px;height:56px;border-radius:12px;flex:none;overflow:hidden;background:var(--s-brand);color:#FFD066;display:flex;align-items:center;justify-content:center;font-weight:800}
.vh-mini-av img{width:100%;height:100%;object-fit:cover}
.vh-mini-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.vh-mini-tx b{color:var(--s-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vh-mini-tx small{color:var(--s-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* offers + featured strips */
.vh-offer-strip{margin:14px 0}
.vh-offer-track{gap:12px}
.vh-offer-card{background:#fff;border:1px solid var(--s-line);border-top:0;border-radius:18px;box-shadow:var(--s-shadow);position:relative;overflow:hidden;padding-top:16px}
.vh-offer-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--s-accent),#FF7A59)}
.vh-offer-card:hover{box-shadow:var(--s-shadow-lg)}
.vh-offer-badge{background:var(--s-accent);color:#241500}

/* ---------- Part D: vendor profile page (vendor.html) ---------- */
.vp-top{background:rgba(255,255,255,.95);backdrop-filter:saturate(1.6) blur(12px);color:var(--s-ink);border-bottom:1px solid var(--s-line)}
.vp-top a,.vp-top button{color:var(--s-ink)}
.vp-top .vp-iconbtn{border-color:var(--s-line);background:#fff}
.vp-brand{color:var(--s-brand)!important}
.vp-cover{height:clamp(170px,30vw,300px);background:linear-gradient(135deg,#EDEAF8,#FFF3D6)}
.vp-cover::after{display:none}
.vp-cover img{opacity:1}
.vp-head,.vp-card{border:1px solid var(--s-line);border-radius:20px;box-shadow:var(--s-shadow)}
.vp-head h1{color:var(--s-brand)}
.vp-card h2{color:var(--s-brand)}
.vp-svc-more summary{cursor:pointer;list-style:none;margin:10px 0 4px;padding:10px;border-radius:12px;background:var(--s-soft);color:var(--s-brand);font-weight:700;text-align:center}
.vp-svc-more summary::-webkit-details-marker{display:none}
.vp-svc-more[open] summary{display:none}
.vp-svc-more .vp-svc:first-of-type{border-top:1px solid var(--vh-line);padding-top:10px}
.vp-actionbar{box-shadow:0 -8px 24px -16px rgba(22,18,46,.35)}
.vp-about.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.vp-about + .vp-linkbtn{margin-top:6px;font-weight:700;color:#4A3FB0}

/* ---------- Part E: vendor dashboard (full screen, tabs) ---------- */
.vd-overlay.open{padding:0;align-items:stretch}
.vd-overlay .vd-shell{max-width:none;width:100%;height:100%;height:100dvh;max-height:none;overflow:hidden;margin:0;border-radius:0;display:flex;flex-direction:column;background:var(--s-bg)}
.vd-top{flex:none;background:#fff;box-shadow:none!important;border-bottom:1px solid var(--s-line)}
.vd-top h3{color:var(--s-brand);font:800 19px var(--vh-font-display)}
.vd-layout{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1240px;width:100%;margin:0 auto}
.vd-side{padding:18px 14px;overflow-y:auto;border-right:1px solid var(--s-line)}
.vd-main{overflow-y:auto;padding:20px 24px 60px;background:none}
.vd-card{background:#fff;border:1px solid var(--s-line);border-radius:18px;padding:14px;box-shadow:var(--s-shadow);display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.vd-id{display:flex;gap:10px;align-items:center;min-width:0}
.vd-id b{display:block;color:var(--s-brand);font:800 16px/1.2 var(--vh-font-display)}
.vd-id small{display:block;color:var(--s-ink2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-av{width:52px;height:52px;border-radius:14px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;background:var(--s-brand)}
.vd-av img{width:100%;height:100%;object-fit:cover}
.vd-status{align-self:flex-start;border-radius:999px;padding:5px 11px;font:700 12.5px var(--vh-font);background:var(--s-soft);color:var(--s-ink)}
.vd-status.ok{background:#E3F6EC;color:#0B6B4C}.vd-status.warn{background:#FFF3D6;color:#7A5200}.vd-status.bad{background:#FDE7EA;color:#B4234B}
.vd-mini-btn{font:700 13px var(--vh-font);color:#4A3FB0;text-decoration:none}
.vd-mini-btn:hover{text-decoration:underline}
.vd-tabs{display:flex;flex-direction:column;gap:2px}
.vd-tabs button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:11px 12px;border-radius:12px;cursor:pointer;
  font:600 14.5px var(--vh-font);color:var(--s-ink2);min-height:44px}
.vd-tabs button:hover{background:#fff;color:var(--s-brand)}
.vd-tabs button[aria-current]{background:#fff;color:var(--s-brand);font-weight:800;box-shadow:var(--s-shadow)}
.vd-tabs button span{width:22px;text-align:center}
.vd-count{margin-left:auto;background:#E0245E;color:#fff;border-radius:999px;font:800 11px var(--vh-font);padding:3px 7px}
.vd-h{font:800 22px var(--vh-font-display);color:var(--s-brand);margin:0 0 14px}
/* show only the current tab's blocks */
#vendorProfileOverlay:not([data-tab="overview"]) [data-vd="overview"],
#vendorProfileOverlay:not([data-tab="profile"]) [data-vd="profile"],
#vendorProfileOverlay:not([data-tab="leads"]) [data-vd="leads"],
#vendorProfileOverlay:not([data-tab="reviews"]) [data-vd="reviews"],
#vendorProfileOverlay:not([data-tab="offers"]) [data-vd="offers"],
#vendorProfileOverlay:not([data-tab="posts"]) [data-vd="posts"],
#vendorProfileOverlay:not([data-tab="share"]) [data-vd="share"]{display:none!important}
.vd-main .vh-intent{background:#fff;border:1px solid var(--s-line);border-radius:18px;box-shadow:var(--s-shadow);padding:16px;margin-top:0!important;margin-bottom:14px}
.vd-main #vpDash{background:none;border:0;box-shadow:none;padding:0}
.vd-main .vh-dash-sec{background:#fff;border:1px solid var(--s-line);border-radius:18px;box-shadow:var(--s-shadow);padding:16px;margin:0 0 14px}
.vd-main .vh-dash-head{margin-bottom:12px}
.vd-listing{background:#fff;border:1px solid var(--s-line);border-radius:18px;box-shadow:var(--s-shadow);padding:16px;margin-bottom:14px}
.vd-main #vpEditMode{background:#fff;border:1px solid var(--s-line);border-radius:18px;padding:16px}
/* share & QR */
.vd-share{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;background:#fff;border:1px solid var(--s-line);border-radius:18px;padding:16px;box-shadow:var(--s-shadow)}
.vd-qr{width:220px;min-height:120px;display:flex;align-items:center;justify-content:center}
.vd-qr canvas{width:220px;height:auto;border-radius:12px;border:1px solid var(--s-line)}
.vd-share-acts{display:flex;flex-direction:column;gap:8px}
.vd-share-acts .vh-btn{justify-content:center;min-height:44px}
.vd-link{width:100%;font:600 13.5px var(--vh-font);padding:10px 12px;border:1px solid var(--s-line);border-radius:12px;background:var(--s-bg)}
/* phones: tabs become a sideways row under the business card */
@media (max-width:860px){
  .vd-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .vd-side{border-right:0;border-bottom:1px solid var(--s-line);padding:10px 12px 8px;background:#fff}
  .vd-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0;border:0;box-shadow:none;margin-bottom:8px}
  .vd-av{width:42px;height:42px}
  .vd-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px}
  .vd-tabs::-webkit-scrollbar{display:none}
  .vd-tabs button{flex:none;width:auto;padding:8px 12px;min-height:40px;font-size:13.5px;border:1px solid var(--s-line);background:#fff}
  .vd-tabs button[aria-current]{background:var(--s-brand);color:#fff;border-color:var(--s-brand)}
  .vd-main{padding:14px 12px calc(40px + env(safe-area-inset-bottom))}
  .vd-share{grid-template-columns:minmax(0,1fr)}
  .vd-qr{width:100%}
}
.vd-id > span:last-child{min-width:0;flex:1}