/* ============================================================
   VendorsHub Explore (js/vh-explore.js) — image feed, filters, post view.
   Uses the site tokens from vh-ui.css / vh-theme.css; light and clean, mobile first.
   ============================================================ */
.vx{--vx-ink:#1A1446;--vx-ink2:#5B6577;--vx-line:#E7E3F2;--vx-gold:#FFB000;--vx-r:16px}
/* full-screen feed: one post per screen, swipe up for the next (website /explore + app tab) */
.vx-reels{position:relative;height:100%;background:#0B0918;color:#fff;overflow:hidden}
.vx-app{position:fixed;left:0;right:0;top:0;bottom:var(--vx-bottom,76px);height:auto}
.vx-feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
.vx-feed::-webkit-scrollbar{display:none}
.vx-reel,.vx-slide{position:relative;height:100%;max-width:min(560px,calc((100dvh - 60px) * .62));margin:0 auto;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#15112E;cursor:pointer}
.vx-strip{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vx-strip::-webkit-scrollbar{display:none}
.vx-strip img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;display:block}
.vx-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:110px 76px 16px 14px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5) 40%,rgba(0,0,0,.84));text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vx-info p{margin:0}
.vx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.vx-tags span{border-radius:999px;padding:5px 10px;font:700 12px/1.1 var(--vh-font,inherit);text-shadow:none}
.vx-cat{background:var(--c,#6741D9);color:#fff}
.vx-reel .vx-type{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(4px)}
.vx-reels .vx-demo{background:#FFD25E;color:#3D2A00;letter-spacing:.03em}
.vx-reel .vx-title{font:800 clamp(19px,5.4vw,24px)/1.2 var(--vh-font-display,inherit);margin:0 0 4px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-reel .vx-price{display:block;font-weight:800;font-size:17px;color:#8CF2BF;margin-bottom:2px}
.vx-reel .vx-by{font-weight:700;font-size:14.5px}
.vx-reel.is-demo .vx-by{color:#FFE29A;font-weight:600;font-size:13px}
.vx-reel .vx-ok{color:#8CF2BF;font-weight:700}
.vx-reel .vx-meta{font-size:13.5px;color:#ECEAF6}
.vx-desc{font-size:13.5px;line-height:1.45;color:#ECEAF6;margin-top:4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.vx-open{margin-top:10px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:8px 16px;font:700 13px var(--vh-font,inherit);cursor:pointer;min-height:38px}
.vx-rdots{display:flex;gap:5px;margin-bottom:8px}
.vx-rdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.vx-rdots i.on{background:#fff}
.vx-rail{position:absolute;right:6px;bottom:20px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:default}
.vx-act{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;color:#fff;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:700 11px var(--vh-font,inherit);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.vx-act .vx-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);text-shadow:none}
.vx-act.call .vx-ic{background:#FFB000;color:#1A1446}
.vx-act.wa .vx-ic{background:#1F9D55}
.vx-act[aria-pressed="true"] .vx-ic{background:#E0245E}
.vx-act:focus-visible .vx-ic,.vx-open:focus-visible{outline:3px solid #FFD25E;outline-offset:2px}
.vx-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:150px 28px 40px;cursor:default;background:radial-gradient(circle at 50% 35%,#2E2478,#0B0918 75%)}
.vx-slide h3{font:800 23px/1.25 var(--vh-font-display,inherit);margin:0;color:#fff}
.vx-slide p{margin:0;color:#D9D4F5;max-width:380px;line-height:1.5}
.vx-slide .vh-empty-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.vx-slide.vx-demo-line{background:radial-gradient(circle at 50% 35%,#5C4300,#120D02 75%)}
.vx-slide .vx-demo{border-radius:999px;padding:6px 12px;font:800 12px var(--vh-font,inherit)}
.vx-hint{font-weight:700;color:#FFE29A!important;margin-top:8px!important}
.vx-reel.vx-skel{background:linear-gradient(90deg,#1E1842,#2A2257,#1E1842);background-size:200% 100%;animation:vxsk 1.2s infinite}
.vx-more{height:1px}
/* filters float over the top of the post */
.vx-filters{position:absolute;top:0;left:0;right:0;z-index:6;max-width:max(min(560px,calc((100dvh - 60px) * .62)),360px);margin:0 auto;padding:10px 12px 26px;background:linear-gradient(rgba(8,6,24,.86),rgba(8,6,24,.55) 70%,rgba(8,6,24,0));pointer-events:none}
.vx-filters > *{pointer-events:auto}
.vx-cities{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.vx-cities::-webkit-scrollbar{display:none}
.vx-chip{flex:none;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:6px 13px;font:700 13px/1 var(--vh-font,inherit);cursor:pointer;min-height:34px}
.vx-chip.on{background:#FFB000;color:#1A1446;border-color:#FFB000}
.vx-row{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-top:6px}
.vx-pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;text-align:left;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);border-radius:12px;padding:5px 10px;cursor:pointer;min-height:42px;color:#fff}
.vx-pick[disabled]{opacity:.55;cursor:not-allowed}
.vx-pick-k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#CFC8F0;font-weight:700}
.vx-pick [data-v]{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vx-sort{height:42px;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(20,16,46,.7);padding:0 8px;font:600 13px var(--vh-font,inherit);color:#fff;max-width:104px;color-scheme:dark}
.vx-active{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vx-active:empty{display:none}
.vx-x{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:6px 11px;font:600 12.5px var(--vh-font,inherit);cursor:pointer}
.vx-x.on{background:#E0245E}
.vx-clear{border:0;background:none;color:#FFD25E;font:700 12.5px var(--vh-font,inherit);cursor:pointer;padding:6px 4px;text-decoration:underline}
.vx-count{color:#E1DCF8;font-size:12px;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vx-count b{color:#fff}
.vx-count:empty{display:none}
@media (max-height:620px){.vx-desc{display:none}.vx-info{padding-top:80px}}
/* a vendor's preview of a new post (js/vh-explore-vendor.js) */
.vx-preview{height:min(64vh,520px);max-width:290px;margin:0 auto;border-radius:18px;pointer-events:none}
.vx-preview .vx-title{font-size:18px}

.vx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.vx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1080px){.vx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:340px){.vx-grid{grid-template-columns:minmax(0,1fr)}}
.vx-card{background:#fff;border:1px solid var(--vx-line);border-radius:var(--vx-r);overflow:hidden;box-shadow:0 1px 2px rgba(26,20,70,.05);transition:transform .15s ease,box-shadow .15s ease}
.vx-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(26,20,70,.10)}
.vx-card-btn{display:block;width:100%;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.vx-card-btn:focus-visible{outline:3px solid #5B4BD6;outline-offset:-3px;border-radius:var(--vx-r)}
.vx-img{position:relative;display:block;aspect-ratio:4/5;background:#EDEAF8;overflow:hidden}
.vx-img img{width:100%;height:100%;object-fit:cover;display:block}
.vx-card .vx-demo,.vx-card .vx-type,.vx-card .vx-n{position:absolute;font:700 10.5px/1 var(--vh-font,inherit);letter-spacing:.04em;border-radius:999px;padding:6px 8px}
.vx-card .vx-demo{left:0;right:0;top:0;border-radius:0;text-align:center;white-space:nowrap;overflow:hidden;padding:6px 4px;font-size:10px;letter-spacing:.03em;background:#FFF3D6;color:#7A5200;border-bottom:1px solid #F2D27A}
.vx-card .vx-type{left:8px;top:8px;background:rgba(26,20,70,.78);color:#fff}
.vx-card .vx-n{right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff}
.vx-body{display:flex;flex-direction:column;gap:3px;padding:10px 11px 12px}
.vx-card .vx-title{font:700 14.5px/1.3 var(--vh-font-display,inherit);color:var(--vx-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-card .vx-price{font-weight:800;color:#0E7A4D;font-size:14px}
.vx-card .vx-meta{font-size:12.5px;color:var(--vx-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-card .vx-by{font-size:12.5px;color:var(--vx-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-card.is-demo .vx-by{color:#8A6A12;font-weight:600}
.vx-card .vx-ok{color:#0E7A4D;font-weight:700}
.vx-skel .vx-img{background:linear-gradient(90deg,#EDEAF8,#F6F4FC,#EDEAF8);background-size:200% 100%;animation:vxsk 1.2s infinite}
.vx-skel i{display:block;height:10px;border-radius:6px;background:#EDEAF8;margin:4px 0}
.vx-skel i:last-child{width:60%}
@keyframes vxsk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.vx-card,.vx-skel .vx-img,.vx-reel.vx-skel{transition:none;animation:none}}
.vx-more{height:1px}
.vx-empty h3{margin-top:0}

/* picker */
.vx-find{width:100%;height:44px;border:1px solid var(--vx-line,#E7E3F2);border-radius:12px;padding:0 12px;font:inherit;margin:4px 0 8px}
.vx-list{max-height:min(60vh,520px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.vx-opt{text-align:left;border:0;background:none;padding:11px 10px;border-radius:10px;font:inherit;cursor:pointer;color:#1A1446}
.vx-opt:hover,.vx-opt:focus-visible{background:#F2F0FA}
.vx-opt.on{background:#1A1446;color:#fff}
.vx-grp summary{cursor:pointer;padding:10px;font-weight:700;color:#1A1446;border-radius:10px}
.vx-grp summary:hover{background:#F7F5FC}
.vx-grp .vx-opt{padding-left:22px}

/* post view */
.vx-modal .vh-modal-box{max-width:620px;padding:0 0 16px;overflow:auto}
.vx-detail{display:flex;flex-direction:column}
.vx-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:#111;aspect-ratio:4/5;max-height:70vh;scrollbar-width:none}
.vx-gallery::-webkit-scrollbar{display:none}
.vx-gallery img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center}
.vx-dots{display:flex;justify-content:center;gap:6px;margin:8px 0 0}
.vx-dots i{width:7px;height:7px;border-radius:50%;background:#D5D0E8}
.vx-dots i.on{background:#1A1446}
.vx-detail > *:not(.vx-gallery){margin-left:16px;margin-right:16px}
.vx-demo-box{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#FFF3D6;border:1px solid #F2D27A;color:#5A3E00;font-size:13.5px}
.vx-d-title{font:800 21px/1.25 var(--vh-font-display,inherit);color:#1A1446;margin:14px 16px 2px}
.vx-d-price{font-weight:800;font-size:18px;color:#0E7A4D}
.vx-d-meta{color:#5B6577;font-size:13.5px;margin-top:4px}
.vx-d-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vx-d-chips span{background:#F2F0FA;color:#1A1446;border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:600}
.vx-d-desc{white-space:pre-line;line-height:1.55;color:#2B2F3A;margin-top:10px}
.vx-vendor{display:flex;gap:12px;align-items:center;margin-top:12px;padding:10px;border:1px solid #E7E3F2;border-radius:14px;text-decoration:none;color:inherit}
.vx-vendor:hover{background:#F7F5FC}
.vx-vendor b{display:block;color:#1A1446}
.vx-vendor small{display:block;color:#5B6577;font-size:12.5px}
.vx-vendor .vx-vlink{color:#5B4BD6;font-weight:700}
.vx-av{width:48px;height:48px;border-radius:12px;flex:none;background:#1A1446;color:#FFD066;display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden}
.vx-av img{width:100%;height:100%;object-fit:cover}
.vx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vx-actions .vh-btn{flex:1 1 calc(50% - 8px);text-decoration:none;justify-content:center;min-height:44px}
.vx-wa{background:#1F9D55;color:#fff;border:0}
.vx-wa:hover{background:#178048}
.vx-grid-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vx-grid-mini .vx-body{padding:6px 7px 8px}
.vx-grid-mini .vx-title{font-size:12.5px}
.vx-grid-mini .vx-meta,.vx-grid-mini .vx-by{display:none}
.vx-note{font-size:12.5px;color:#5B6577;margin-top:14px;line-height:1.5}

/* vendor: my posts + post form (js/vh-explore-vendor.js) */
.vx-mine{display:flex;flex-direction:column;gap:10px}
.vx-mine-row{display:flex;gap:10px;align-items:flex-start;border:1px solid #E7E3F2;border-radius:12px;padding:10px;background:#fff}
.vx-mine-row img{width:64px;height:80px;object-fit:cover;border-radius:8px;flex:none;background:#EDEAF8}
.vx-mine-row b{display:block;color:#1A1446}
.vx-st{display:inline-block;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:700;margin:3px 0}
.vx-st.pending{background:#FFF3D6;color:#7A5200}.vx-st.approved{background:#E3F6EC;color:#0E7A4D}.vx-st.rejected,.vx-st.suspended{background:#FDE7EA;color:#B4234B}.vx-st.draft{background:#EEF0F4;color:#5B6577}
.vx-form .vh-acct-field{margin-bottom:10px}
.vx-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 10px}
.vx-photos figure{margin:0;position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#EDEAF8}
.vx-photos img{width:100%;height:100%;object-fit:cover}
.vx-photos button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.vx-add-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border:2px dashed #CFC8EA;border-radius:10px;color:#5B4BD6;font-weight:700;cursor:pointer;text-align:center;padding:6px}
.vx-add-photo input{display:none}

/* admin → Explore (js/vh-admin-explore.js) */
.vh-ax-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.vh-ax-stats div{background:#fff;border:1px solid #E7E3F2;border-radius:12px;padding:12px}
.vh-ax-stats b{display:block;font:800 24px var(--vh-font-display,inherit);color:#1A1446}
.vh-ax-stats span{font-size:12.5px;color:#5B6577}
.vh-ax-switches{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:#fff;border:1px solid #E7E3F2;border-radius:12px;padding:8px 12px}
.vh-ax-gaps{margin-top:10px;background:#fff;border:1px solid #E7E3F2;border-radius:12px;padding:8px 12px}
.vh-ax-gaps summary{cursor:pointer;font-weight:700;color:#1A1446}
.vh-ax-chips{display:flex;flex-wrap:wrap;gap:6px}
.vh-ax-chips span{background:#F2F0FA;border-radius:999px;padding:4px 10px;font-size:12.5px}
.vh-ax-row{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #E7E3F2;border-radius:12px;padding:10px;margin-bottom:10px}
.vh-ax-row > img{width:84px;height:105px;object-fit:cover;border-radius:10px;flex:none;background:#EDEAF8}
.vh-ax-main{flex:1;min-width:0}
.vh-ax-desc{font-size:13.5px;color:#2B2F3A;margin:4px 0;white-space:pre-line;max-height:5.6em;overflow:hidden}
.vh-ax-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* Explore entry points stay hidden until explore_settings() says it is on (js/vh-explore.js) */
html:not(.vx-on) [data-explore-link]{display:none!important}