/* PA Wedding Guide — Vendor Search UI (scoped under .pwg-vs so it can't clash with the theme).
   The result cards are Voxel-native and are intentionally NOT styled here. */

.pwg-vs{
	/* Brand palette (from the site's Elementor globals): warm taupe/brown. The interactive accent is the
	   brand charcoal #333333 (owner's choice for all fills/active states + link text) — AA on white both as
	   a fill (white text) and as link text. --pwg-accent-ink (#1F1F1F) carries hover/darker states. */
	--pwg-accent:#333333; --pwg-accent-ink:#1F1F1F; --pwg-accent-soft:#EFEDEB; --pwg-accent-line:#C0AFA5;
	--pwg-accent-2:#967969;
	--pwg-ink:#2C2B28; --pwg-body:#333333; --pwg-muted:#6B6560; --pwg-faint:#AC9E91;
	--pwg-surface:#fff; --pwg-surface-2:#FAF9F6; --pwg-border:#E8E1D8; --pwg-border-strong:#C0AFA5;
	--pwg-radius:12px;
	--pwg-top:0px;      /* flush top anchor (admin-bar clearance only) — no gap for cards to peek through */
	--pwg-stick:24px;   /* inset sticky offset for the rail (admin bar adds 32px below) */
	color:var(--pwg-body);
	font-family:inherit;
	font-size:15px;
}
.pwg-vs *{ box-sizing:border-box; }
.pwg-vs-loading{ padding:40px 16px; text-align:center; color:var(--pwg-muted); }

/* category bar */
.pwg-catwrap{ position:relative; padding:6px 0 10px; border-bottom:1px solid var(--pwg-border); margin-bottom:18px; }
.pwg-cats{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding:4px 2px; scroll-padding:0 44px; }
.pwg-cats::-webkit-scrollbar{ display:none; }
/* Edge fade: mask the strip's OWN content to transparent at whichever side has more to scroll.
   Background-agnostic (fades the tiles, not a color overlay) — appears only on the scrollable side. */
.pwg-catwrap.pwg-scroll-r .pwg-cats{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 54px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 54px),transparent); }
.pwg-catwrap.pwg-scroll-l .pwg-cats{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 54px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 54px),transparent); }
.pwg-catwrap.pwg-scroll-l.pwg-scroll-r .pwg-cats{ -webkit-mask-image:linear-gradient(to right,transparent,#000 54px,#000 calc(100% - 54px),transparent); mask-image:linear-gradient(to right,transparent,#000 54px,#000 calc(100% - 54px),transparent); }
/* Floating round arrows — hidden unless there's more to scroll that way (and gone entirely if it all fits). */
.pwg-catnav{ position:absolute; top:43px; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
	border:1px solid var(--pwg-border); background:var(--pwg-surface); color:var(--pwg-ink);
	display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3;
	box-shadow:0 6px 18px -6px rgba(20,24,20,.32); opacity:0; visibility:hidden; transition:opacity .2s, background .15s, color .15s, border-color .15s; }
.pwg-catnav[data-nav="prev"]{ left:-4px; }
.pwg-catnav[data-nav="next"]{ right:-4px; }
.pwg-catnav:hover{ color:var(--pwg-accent); border-color:var(--pwg-accent-line); }
.pwg-catwrap.pwg-scroll-l .pwg-catnav[data-nav="prev"]{ opacity:1; visibility:visible; }
.pwg-catwrap.pwg-scroll-r .pwg-catnav[data-nav="next"]{ opacity:1; visibility:visible; }
.pwg-cat{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; width:96px; padding:2px; border:none; background:transparent; color:var(--pwg-muted); cursor:pointer; }
.pwg-cat .pwg-cic{ width:66px; height:66px; display:flex; align-items:center; justify-content:center; border-radius:12px;
	background:var(--pwg-surface); border:1px solid var(--pwg-border); color:var(--pwg-body);
	transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s; }
.pwg-cat .pwg-cic svg{ width:30px; height:30px; }
.pwg-cat .pwg-cl{ font-size:12px; font-weight:600; line-height:1.2; text-align:center; color:inherit;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:2.4em; }
.pwg-cat .pwg-cn{ display:none; }
.pwg-cat:hover .pwg-cic{ border-color:var(--pwg-accent-line); color:var(--pwg-accent-ink); transform:translateY(-3px); box-shadow:0 8px 18px -8px rgba(90,73,63,.4); }
.pwg-cat:hover{ color:var(--pwg-ink); }
.pwg-cat.active .pwg-cic{ background:var(--pwg-accent); border-color:var(--pwg-accent); color:#fff; transform:translateY(-3px); box-shadow:0 10px 22px -8px rgba(90,73,63,.55); }
.pwg-cat.active{ color:var(--pwg-accent-ink); }
.pwg-cat.active .pwg-cl{ font-weight:700; }
.pwg-cat[disabled]{ opacity:.34; cursor:default; }
.pwg-cat[disabled]:hover .pwg-cic{ border-color:var(--pwg-border); color:var(--pwg-body); transform:none; box-shadow:none; }

/* quick filter chips */
.pwg-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 20px; }
.pwg-qchip{ border:1px solid var(--pwg-border-strong); background:var(--pwg-surface); color:var(--pwg-body); font:inherit; font-size:13px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer; transition:transform .12s, box-shadow .12s, background .12s, border-color .12s, color .12s; }
.pwg-qchip:hover{ border-color:var(--pwg-accent-line); color:var(--pwg-accent-ink); transform:translateY(-1px); box-shadow:0 5px 12px -7px rgba(90,73,63,.4); }
.pwg-qchip.active{ background:var(--pwg-accent); border-color:var(--pwg-accent); color:#fff; box-shadow:0 6px 14px -7px rgba(90,73,63,.5); }

/* layout */
.pwg-body{ display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:start; }
.pwg-body:has(.pwg-rail.empty){ grid-template-columns:1fr; }
/* Grid items default to min-width:auto and refuse to shrink below their content, which let the results
   column (long location value + radius) push past the viewport → horizontal page overflow. min-width:0
   lets the column shrink to its track so inner flex children (the location input) truncate instead. */
.pwg-main{ min-width:0; }
.pwg-rail.empty{ display:none; }
body.admin-bar .pwg-vs{ --pwg-top:32px; --pwg-stick:56px; }
.pwg-rail{ position:sticky; top:var(--pwg-stick,16px); }

.pwg-railhead{ display:flex; align-items:center; gap:8px; padding:2px 2px 10px; }
.pwg-railhead .pwg-cic svg{ width:18px; height:18px; color:var(--pwg-accent); }
.pwg-eye{ font-size:10.5px; text-transform:uppercase; letter-spacing:.15em; color:var(--pwg-faint); font-weight:700; }
.pwg-th{ font-weight:600; color:var(--pwg-accent); }

.pwg-panel{ background:var(--pwg-surface); border:1px solid var(--pwg-border); border-radius:16px;
	box-shadow:0 1px 2px rgba(44,43,40,.05), 0 12px 26px -20px rgba(44,43,40,.30); }
/* Filter-rail header: icon + "FILTERS", with "N active" + "Clear all" when filters are applied. */
/* Fixed height so the header doesn't grow when "N active · Clear all" appears (the button is a touch
   taller than the plain title). Content stays vertically centered in either state. */
.pwg-rail-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:8px 20px; border-bottom:1px solid var(--pwg-border); }
.pwg-rail-clear{ line-height:1.3; }
.pwg-rail-title{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--pwg-ink); }
.pwg-rail-title svg{ color:var(--pwg-muted); flex:none; }
.pwg-rail-word{ text-transform:uppercase; letter-spacing:.06em; font-size:13px; }
.pwg-rail-count{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--pwg-muted); font-size:13px; margin-left:2px; }
.pwg-rail-clear{ background:none; border:none; color:var(--pwg-accent); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:2px 2px; white-space:nowrap; }
.pwg-rail-clear:hover{ text-decoration:underline; }
.pwg-facet{ border-bottom:1px solid var(--pwg-border); }
.pwg-facet:last-child{ border-bottom:none; }
.pwg-fsum{ cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--pwg-ink); font-size:15px; user-select:none; position:relative; }
.pwg-chev{ color:var(--pwg-muted); transition:transform .18s; }
.pwg-facet.open .pwg-chev{ transform:rotate(90deg); }
.pwg-fbody{ display:none; padding:2px 20px 18px; }
.pwg-facet.open .pwg-fbody{ display:block; }

.pwg-opt{ display:flex; align-items:center; gap:11px; padding:8px 0; font-size:14px; color:var(--pwg-body); cursor:pointer; }
.pwg-opt input{ appearance:none; -webkit-appearance:none; width:17px; height:17px; border:1.5px solid var(--pwg-border-strong); border-radius:5px; flex:none; background:var(--pwg-surface); position:relative; margin:0; cursor:pointer; }
.pwg-opt input:checked{ background:var(--pwg-accent); border-color:var(--pwg-accent); }
.pwg-opt input:checked::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.pwg-opt .pwg-nm{ flex:1; }
.pwg-opt .pwg-ct{ color:var(--pwg-faint); font-size:12px; font-variant-numeric:tabular-nums; }
.pwg-opt input:disabled{ opacity:.4; }
.pwg-more-link{ background:none; border:none; color:var(--pwg-accent); font-size:12.5px; font-weight:600; padding:6px 0 0; cursor:pointer; }

/* Include / Exclude ("Any of" / "None of") mode switch at the top of a multi-option facet. */
.pwg-mode{ display:inline-flex; margin:0 0 12px; border:1px solid var(--pwg-border-strong); border-radius:8px; overflow:hidden; }
.pwg-mode-b{ border:none; background:var(--pwg-surface); color:var(--pwg-muted); font:inherit; font-size:12px; font-weight:600; padding:6px 12px; cursor:pointer; transition:background .12s, color .12s; }
.pwg-mode-b + .pwg-mode-b{ border-left:1px solid var(--pwg-border-strong); }
.pwg-mode-b.on{ background:var(--pwg-accent); color:#fff; }
.pwg-mode-b:not(.on):hover{ background:var(--pwg-surface-2); color:var(--pwg-ink); }

/* Switcher (boolean) filters — headless on/off toggle rows (no group heading). Each switcher is its own
   .pwg-facet row, so consecutive ones read as a clean block of toggles with dividers between. */
.pwg-swrow{ padding:0 20px; }
.pwg-swrow .pwg-switch{ padding:13px 0; }
.pwg-switches{ display:flex; flex-direction:column; }
.pwg-switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:15px; color:var(--pwg-ink); cursor:pointer; }
.pwg-switch-nm{ flex:1; min-width:0; font-weight:700; }
.pwg-switch-in{ position:absolute; opacity:0; width:0; height:0; }
/* OFF = neutral grey, ON = brand brown — clearly distinct at a glance (a taupe off-state read too close
   to the brown on-state). */
.pwg-switch-tr{ flex:none; width:40px; height:23px; border-radius:999px; background:#c9cacd; position:relative; transition:background .16s; }
.pwg-switch-th{ position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(44,43,40,.35); transition:transform .16s; }
.pwg-switch-in:checked + .pwg-switch-tr{ background:var(--pwg-accent); }
.pwg-switch-in:checked + .pwg-switch-tr .pwg-switch-th{ transform:translateX(17px); }
.pwg-switch-in:focus-visible + .pwg-switch-tr{ box-shadow:0 0 0 3px var(--pwg-accent-soft); }

.pwg-price-in{ display:flex; align-items:center; gap:8px; }
.pwg-price-box{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:11px 13px; border:1px solid var(--pwg-border-strong); border-radius:9px; background:var(--pwg-surface); }
.pwg-price-box:focus-within{ border-color:var(--pwg-accent); box-shadow:0 0 0 3px var(--pwg-accent-soft); }
.pwg-price-box input{ flex:1; width:100%; min-width:0; border:none; background:none; padding:0; font:inherit; font-size:14px; color:var(--pwg-ink); outline:none; }
.pwg-price-box input::placeholder{ color:var(--pwg-faint); }
.pwg-cur{ color:var(--pwg-muted); font-size:14px; flex:none; }
.pwg-dash{ color:var(--pwg-muted); flex:none; padding:0 1px; }

/* wedding timeline slider */
.pwg-timeline{ display:flex; flex-direction:column; gap:9px; padding-top:2px; }
.pwg-tl-val{ font-size:13px; font-weight:600; color:var(--pwg-accent-ink); }
.pwg-timeline input[type=range]{ width:100%; accent-color:var(--pwg-accent); margin:0; }
.pwg-tl-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--pwg-faint); }

/* info bubble + tooltip (booking window explainer) */
.pwg-fsum-l{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.pwg-info{ display:inline-flex; align-items:center; justify-content:center; color:var(--pwg-faint); cursor:help; flex:none; outline:none; }
.pwg-info:hover, .pwg-info:focus{ color:var(--pwg-accent); }
.pwg-info svg{ display:block; }
/* Anchored to the facet HEADER (constant height) and spanning its width, so the bubble stays
   inside the rail column — no overlap with the vendor cards, no z-index fight with the template. */
.pwg-tip{ position:absolute; bottom:calc(100% + 6px); left:12px; right:12px;
	padding:10px 12px; border-radius:10px; z-index:5;
	background:var(--pwg-ink); color:#fff; font-size:12px; font-weight:500; line-height:1.5; text-align:left;
	white-space:normal; box-shadow:0 10px 30px rgba(15,23,42,.28);
	opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .16s, transform .16s; }
.pwg-tip::after{ content:""; position:absolute; top:100%; left:20px;
	border:6px solid transparent; border-top-color:var(--pwg-ink); }
.pwg-info:hover .pwg-tip, .pwg-info:focus .pwg-tip, .pwg-info:focus-within .pwg-tip{
	opacity:1; visibility:visible; transform:translateY(0); }
/* hide number spinners for a cleaner look */
.pwg-price-in input::-webkit-outer-spin-button, .pwg-price-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pwg-price-in input[type=number]{ -moz-appearance:textfield; }

/* skeleton */
.pwg-skel{ border:1px solid var(--pwg-border); border-radius:var(--pwg-radius); overflow:hidden; background:var(--pwg-surface); }
.pwg-skel-img{ aspect-ratio:16/10; background:var(--pwg-surface-2); }
.pwg-skel-l{ height:12px; margin:14px 16px 0; border-radius:6px; background:linear-gradient(90deg,var(--pwg-surface-2),var(--pwg-border),var(--pwg-surface-2)); background-size:200% 100%; animation:pwg-sheen 1.2s linear infinite; }
.pwg-skel-l1{ width:70%; } .pwg-skel-l2{ width:45%; } .pwg-skel-l3{ width:55%; margin-bottom:16px; }
/* horizontal skeleton (list + map views: image left, text right) */
.pwg-skel-h{ display:flex; align-items:stretch; min-height:150px; }
.pwg-skel-h .pwg-skel-img{ width:38%; max-width:240px; flex:none; aspect-ratio:auto; }
.pwg-skel-h .pwg-skel-body{ flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; }
.pwg-skel-h .pwg-skel-l{ margin:0 0 12px; }
.pwg-skel-h .pwg-skel-l1{ width:58%; height:16px; }
.pwg-skel-h .pwg-skel-l2{ width:88%; } .pwg-skel-h .pwg-skel-l4{ width:74%; }
.pwg-skel-h .pwg-skel-l3{ width:42%; margin:auto 0 0; }
/* map area shimmer while Mapbox GL loads */
.pwg-map-loading::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:linear-gradient(90deg,var(--pwg-surface-2),#ece7db,var(--pwg-surface-2)); background-size:200% 100%; animation:pwg-sheen 1.3s linear infinite; }
@keyframes pwg-sheen{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce){ .pwg-skel-l, .pwg-skc-i, .pwg-skc-l, .pwg-boot-search{ animation:none; } }

/* boot skeleton (server-rendered, replaced by JS) */
.pwg-boot-cats{ display:flex; gap:10px; padding:4px 2px 10px; border-bottom:1px solid var(--pwg-border); margin-bottom:18px; overflow:hidden; }
.pwg-skc{ flex:none; width:84px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.pwg-skc-i{ width:66px; height:66px; border-radius:12px; }
.pwg-skc-l{ width:60px; height:10px; border-radius:5px; }
.pwg-boot-search{ height:44px; border-radius:999px; margin-bottom:16px; }
.pwg-skc-i, .pwg-skc-l, .pwg-boot-search{ background:linear-gradient(90deg,var(--pwg-surface-2),var(--pwg-border),var(--pwg-surface-2)); background-size:200% 100%; animation:pwg-sheen 1.2s linear infinite; }

/* hero search bar */
.pwg-herobar{ display:flex; align-items:stretch; gap:6px; background:var(--pwg-surface); border:1px solid var(--pwg-border); border-radius:16px; box-shadow:0 6px 20px -12px rgba(27,36,31,.28); padding:7px; margin-bottom:18px; max-width:840px; }
.pwg-hero-search{ position:relative; flex:1; display:flex; align-items:center; min-width:0; }
.pwg-hero-search .pwg-si{ position:absolute; left:16px; color:var(--pwg-muted); display:flex; pointer-events:none; }
#pwg-q{ width:100%; border:none; background:transparent; padding:12px 12px 12px 46px; font:inherit; font-size:15px; color:var(--pwg-ink); outline:none; }
#pwg-q::placeholder{ color:var(--pwg-faint); }
.pwg-hero-loc{ display:flex; align-items:center; gap:4px; padding:0 6px 0 14px; color:var(--pwg-muted); flex:1; min-width:0; }
.pwg-hero-loc select{ border:none; background:transparent; font:inherit; font-size:13.5px; color:var(--pwg-ink); padding:12px 2px; cursor:pointer; outline:none; }
.pwg-hero-loc #pwg-place{ border:none; background:transparent; font:inherit; font-size:14px; color:var(--pwg-ink); padding:12px 2px; outline:none; flex:1; width:auto; min-width:0; }
.pwg-hero-loc #pwg-place::placeholder{ color:var(--pwg-faint); }
.pwg-place-clear{ border:none; background:transparent; color:var(--pwg-muted); cursor:pointer; display:flex; align-items:center; padding:2px; border-radius:50%; }
.pwg-place-clear:hover{ color:var(--pwg-accent); }
/* Dedicated one-tap "use my current location" crosshair (mirrors Voxel's native field). Always visible. */
.pwg-geoloc{ border:none; background:transparent; color:var(--pwg-accent); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:7px; border-radius:50%; flex:none; }
.pwg-geoloc:hover{ background:var(--pwg-accent-soft); }
/* Locating: spin the crosshair in place (inline feedback — no dropdown/popup). */
.pwg-geoloc-busy{ pointer-events:none; }
.pwg-geoloc-busy svg{ animation:pwg-spin .8s linear infinite; transform-origin:center; }
@keyframes pwg-spin{ to{ transform:rotate(360deg); } }
#pwg-radius{ border-left:1px solid var(--pwg-border) !important; border-radius:0; min-width:74px; padding:12px 4px 12px 10px; color:var(--pwg-muted); font-weight:600; }
/* city autocomplete dropdown (our own — plain geocoding REST, no library) */
.pwg-hero-loc{ position:relative; }
.pwg-ac{ position:absolute; top:calc(100% + 8px); left:0; min-width:280px; z-index:60;
	background:var(--pwg-surface); border:1px solid var(--pwg-border); border-radius:10px;
	box-shadow:0 14px 34px -14px rgba(20,24,20,.35); overflow:hidden; padding:5px; }
.pwg-ac-item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent;
	font:inherit; font-size:13.5px; color:var(--pwg-body); padding:9px 10px; border-radius:7px; cursor:pointer; }
.pwg-ac-item svg{ flex:none; color:var(--pwg-muted); }
.pwg-ac-item:hover, .pwg-ac-item.focus{ background:var(--pwg-accent-soft); color:var(--pwg-accent-ink); }
/* "Use my current location" row — accented so it reads as an action, plus an info/error message row. */
.pwg-ac-locate{ font-weight:600; color:var(--pwg-accent-ink); }
.pwg-ac-locate svg{ color:var(--pwg-accent); }
.pwg-ac-locate + .pwg-ac-item{ margin-top:2px; border-top:1px solid var(--pwg-border); padding-top:11px; border-radius:0 0 7px 7px; }
.pwg-ac-msg{ padding:10px 11px; font-size:13px; color:var(--pwg-muted); }
.pwg-hero-btn{ display:inline-flex; align-items:center; gap:7px; border:none; background:var(--pwg-accent); color:#fff; font:inherit; font-weight:700; font-size:14px; padding:0 24px; border-radius:11px; cursor:pointer; flex:none; transition:background .14s; }
.pwg-hero-btn:hover{ background:var(--pwg-accent-ink); }
@media(max-width:640px){
	/* Location field + full-width Search button stacked. Location fills its row. */
	.pwg-herobar{ flex-wrap:wrap; gap:2px; padding:6px 6px; }
	.pwg-hero-loc{ border-left:none; flex-basis:100%; padding:6px 12px; gap:9px; }
	.pwg-hero-loc > svg{ flex:none; }
	.pwg-hero-loc #pwg-place{ flex:1; width:auto; padding-left:0; font-size:16px; }
	.pwg-hero-btn{ flex-basis:100%; justify-content:center; padding:14px; margin-top:4px; font-size:15px; }
	/* iOS auto-zooms the whole page into any focused text field with font-size < 16px (and never zooms
	   back out). Keep every text field at 16px on phones so tapping location / price never zooms. */
	#pwg-pmin, #pwg-pmax, .pwg-price-box input{ font-size:16px; }

	/* Category strip: smaller, tighter tiles on phones so more categories fit and it eats less height. */
	.pwg-cat{ width:74px; gap:6px; }
	.pwg-cat .pwg-cic{ width:52px; height:52px; border-radius:11px; }
	.pwg-cat .pwg-cic svg{ width:24px; height:24px; }
	.pwg-cat .pwg-cl{ font-size:11.5px; }
	.pwg-catnav{ top:34px; width:32px; height:32px; }
}

/* view toggle (Grid / List / Map) */
.pwg-viewtoggle{ display:inline-flex; border:1px solid var(--pwg-border-strong); border-radius:8px; overflow:hidden; flex:none; }
.pwg-vt{ border:none; border-left:1px solid var(--pwg-border); background:var(--pwg-surface); color:var(--pwg-muted); padding:8px 11px; cursor:pointer; display:flex; align-items:center; }
.pwg-vt:first-child{ border-left:none; }
.pwg-vt svg{ width:17px; height:17px; }
.pwg-vt:hover:not([disabled]){ color:var(--pwg-ink); background:var(--pwg-surface-2); }
.pwg-vt.active{ background:var(--pwg-accent); color:#fff; }
.pwg-vt[disabled]{ opacity:.38; cursor:default; }
/* list view = single column */
.pwg-vs .pwg-grid.pwg-view-list{ grid-template-columns:1fr; }

/* ---- split list + map view (Airbnb/Zillow proportions) ---- */
.pwg-mapcol{ display:none; }
/* Map mode stays INSIDE the theme's page container (no full-bleed breakout) so grid and map view are
   the same width — whatever the container gives us (e.g. 1600px). The split just uses that width. */
body.pwg-map-full{ overflow-x:clip; }
@media(min-width:1025px){
	.pwg-vs.pwg-map-mode{ position:relative; }
	/* Two-row topbar grid for ALL views: title top-left, search right-aligned top-right; applied-filter
	   chips + sort/view-toggle on the row below. The results-head uses display:contents so its title and
	   controls drop into the grid independently. */
	.pwg-topbar{ display:grid; grid-template-columns:1fr minmax(380px,760px);
		grid-template-areas:"title search" "controls controls" "chips chips"; column-gap:28px; row-gap:14px; align-items:center;
		margin-bottom:22px; }
	.pwg-topbar .pwg-results-head{ display:contents; }
	.pwg-topbar .pwg-count{ grid-area:title; margin:0; }
	.pwg-topbar .pwg-herobar{ grid-area:search; margin:0; max-width:none; width:100%; }
	.pwg-topbar .pwg-rh-right{ grid-area:controls; justify-self:end; }
	/* Chips span the FULL width (their own row) so a long list wraps across everything instead of
	   cramming into a half-width column. Collapsed to "+N more" in JS so it never balloons. */
	.pwg-topbar .pwg-active{ grid-area:chips; margin:0; }
	.pwg-topbar .pwg-active:empty{ display:none; }
	/* Map view additionally sticks the topbar so the controls stay put while the feed scrolls. Anchored
	   FLUSH at --pwg-top so its background covers the top edge — no cards peek above it. */
	/* No extra top padding — the title lines up with grid view (grid view's topbar isn't sticky and has
	   no top padding), so switching grid↔map doesn't drop the content. padding-bottom matches grid's
	   margin so the gap down to the results is the same too. */
	.pwg-map-mode .pwg-topbar{ position:sticky; top:var(--pwg-top,0px); z-index:6;
		background:var(--pwg-surface-2); padding-top:0; padding-bottom:22px; margin-bottom:0; }
	/* No gradient fade under the topbar — it was bleeding a hazy strip onto the map's top edge. The
	   solid surface-2 background + a JS cover (below) hide scrolling cards cleanly instead. */
}
/* Mid widths (rail is showing, so the main column is tight): title | search side-by-side squeezes the
   "N vendors across …" line into a sliver. Stack them — title, then full-width search, then controls. */
@media(min-width:1025px) and (max-width:1200px){
	.pwg-topbar{ grid-template-columns:1fr; grid-template-areas:"title" "search" "controls" "chips"; row-gap:12px; }
	.pwg-topbar .pwg-rh-right{ justify-self:start; }
}
/* Opaque cover that fills any gap ABOVE the stuck topbar (admin bar / theme-header offset) so list
   cards never show through the top. Sized + positioned to the topbar by JS (syncTopCover). */
.pwg-tb-cover{ position:fixed; top:0; z-index:5; background:var(--pwg-surface-2); display:none; pointer-events:none; }
/* One scroll context: the PAGE scrolls, the map is sticky at ~viewport height, cards flow naturally.
   isolation:isolate makes the whole split its own stacking context BELOW the sticky topbar (z-index:6),
   so nothing inside it — including a card whose hover raises its z-index — can ever paint over the bar. */
.pwg-map-mode .pwg-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px; align-items:start; isolation:isolate; position:relative; z-index:0; }
/* Own stacking context (z-index:0) capped BELOW the sticky topbar (z-index:6): a card's hover state
   raises its own z-index, which used to make the slice tucked under the bar pop OVER it. Confining the
   whole list to one low context means no card can ever paint above the topbar, hover or not.
   clip-path clips the list at its TOP edge (inset top:0) while leaving side/bottom overflow room for
   card shadows — Voxel cards use overflow:visible, so a hover shadow/element could otherwise spill up
   past the top edge and show at the sticky-bar seam. */
.pwg-map-mode .pwg-list-col{ min-width:0; position:relative; z-index:0; clip-path:inset(0 -40px -40px -40px); }
.pwg-map-mode .pwg-mapcol{ display:block; position:sticky; top:calc(var(--pwg-top,0px) + var(--pwg-head-h,0px));
	height:calc(100vh - var(--pwg-top,0px) - var(--pwg-head-h,0px) - 24px);
	border:none; border-radius:16px; overflow:hidden; background:var(--pwg-surface-2); }
.pwg-map{ width:100%; height:100%; }
.pwg-map-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--pwg-muted); font-size:14px; }
/* Pin popup: the listing card, so people can see who a pin is. Strip Mapbox's default padding/tip so the
   card sits flush; the card carries its own background and radius. */
.pwg-mappop .mapboxgl-popup-content{ padding:0; background:transparent; border-radius:14px; overflow:visible; box-shadow:none; }
.pwg-map-pop{ width:250px; max-width:78vw; border-radius:14px; overflow:hidden; background:var(--pwg-surface);
	box-shadow:0 10px 34px -10px rgba(20,24,20,.5); }
.pwg-map-pop .ts-preview{ width:100%; }
.pwg-mappop .mapboxgl-popup-close-button{ width:24px; height:24px; top:6px; right:6px; border-radius:50%;
	background:rgba(20,24,20,.55); color:#fff; font-size:16px; line-height:1; z-index:2; }
.pwg-mappop .mapboxgl-popup-close-button:hover{ background:rgba(20,24,20,.8); }
.pwg-mappop .mapboxgl-popup-tip{ display:none; }
/* pins/clusters are native GL layers (see setupLayers) — no DOM markers, no drag jitter. */
/* "Search as I move the map" toggle, floating top-left over the map */
.pwg-map-chk{ position:absolute; top:12px; left:12px; z-index:5; display:inline-flex; align-items:center; gap:7px;
	background:var(--pwg-surface); border:1px solid var(--pwg-border-strong); border-radius:999px; padding:7px 13px;
	font-size:12.5px; font-weight:600; color:var(--pwg-ink); cursor:pointer; box-shadow:0 1px 3px rgba(20,24,20,.14); user-select:none; }
.pwg-map-chk input{ accent-color:var(--pwg-accent); margin:0; cursor:pointer; }
/* Close (X) button — only shown on the mobile full-screen map overlay (see 859px block). */
.pwg-map-close{ display:none; position:absolute; top:14px; left:14px; z-index:6; width:42px; height:42px;
	border-radius:50%; border:none; background:var(--pwg-surface); color:var(--pwg-ink); cursor:pointer;
	align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(20,24,20,.32); }
.pwg-map-close:hover{ background:var(--pwg-surface-2); }
.pwg-map-close svg{ width:20px; height:20px; }
/* highlighted card when its pin is clicked */
/* Selected card (its pin was clicked): a soft lift, not an outlined border — the offset outline read as an
   ugly double border, and the map popup already shows which pin you picked. */
.pwg-card-hot{ box-shadow:0 12px 30px -12px rgba(20,24,20,.5); transition:box-shadow .2s; border-radius:var(--pwg-radius); }
@media(max-width:1024px){
	/* Mobile map view = FULL-SCREEN OVERLAY (WeddingWire/Zillow). Tapping the map toggle opens the map
	   over everything — no cards, no filter rail, no topbar chrome — with an X (top-left) to close back
	   to the list. The map is fixed to the viewport so the page behind it can't scroll or peek through. */
	body.pwg-map-full{ overflow:hidden; }
	/* The desktop split isolates its own stacking context (isolation:isolate + z-index:0) so a hovered card
	   can't paint over the sticky topbar. On mobile that context was CAPPING the full-screen map's z-index,
	   letting the theme's sticky header bleed through the top of the map. Neutralise it here so the fixed
	   map can rise above the site header — a true full-screen overlay. */
	.pwg-map-mode .pwg-split{ display:block; position:static; isolation:auto; z-index:auto; }
	.pwg-map-mode .pwg-list-col{ display:none; }
	.pwg-map-mode .pwg-mapcol{ position:fixed; inset:0; z-index:2147483647;
		height:auto; min-height:0; margin:0; border-radius:0; }
	.pwg-map-mode .pwg-map-close{ display:flex; top:calc(14px + env(safe-area-inset-top,0px)); }
	/* Center the "search as I move" pill up top so it clears the X in the corner (below any notch). */
	.pwg-map-mode .pwg-map-chk{ top:calc(14px + env(safe-area-inset-top,0px)); left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; max-width:calc(100vw - 96px); }
}

/* applied-filter chips — sit on their own row below the results head (title + sort) */
.pwg-active{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 20px; }
.pwg-active:empty{ display:none; }
.pwg-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--pwg-accent-soft); color:var(--pwg-accent-ink); border:1px solid var(--pwg-accent-line); border-radius:8px; padding:6px 8px 6px 11px; font-size:13px; font-weight:500; }
.pwg-pill button{ border:none; background:transparent; color:var(--pwg-accent); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; flex:none; }
.pwg-pill button:hover{ background:var(--pwg-accent); color:#fff; }
.pwg-clear{ background:none; border:none; color:var(--pwg-accent); font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; padding:5px 4px; margin-left:2px; }
.pwg-clear:hover{ text-decoration:underline; }
/* "+N more" / "Show less" chip-row toggle — a quiet pill so it reads as one of the chips. */
.pwg-chips-more{ background:var(--pwg-surface); border:1px dashed var(--pwg-border-strong); color:var(--pwg-muted); border-radius:8px; padding:6px 11px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.pwg-chips-more:hover{ border-color:var(--pwg-accent); color:var(--pwg-accent); }

.pwg-results-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.pwg-count{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pwg-count-t{ font-size:23px; font-weight:700; color:var(--pwg-ink); line-height:1.15; letter-spacing:-.01em; }
.pwg-count-s{ font-size:13.5px; color:var(--pwg-muted); }
.pwg-sort{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--pwg-muted); }
/* Custom chevron (appearance:none) so the arrow spacing is consistent instead of the OS default that
   crowded the label. Extra right padding reserves room for it. */
.pwg-sort select{ font:inherit; font-size:13px; padding:7px 30px 7px 11px; border:1px solid var(--pwg-border-strong); border-radius:8px; background-color:var(--pwg-surface); color:var(--pwg-ink); cursor:pointer;
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat:no-repeat; background-position:right 10px center; background-size:13px; }

/* grid — native cards live here; fallback layout if Voxel post-feed CSS is absent */
.pwg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:22px; transition:opacity .15s; }
.pwg-grid.pwg-loading{ opacity:.5; pointer-events:none; }
/* Voxel's post-feed.css forces .post-feed-grid to a FIXED 3 columns (non-responsive, since that
   normally comes from the Post Feed widget). Override with our responsive grid + top alignment. */
.pwg-vs .pwg-grid.post-feed-grid{ grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); align-items:start; }
/* List + map views are single-column — must out-rank the responsive auto-fill above. */
.pwg-vs .pwg-grid.post-feed-grid.pwg-view-list{ grid-template-columns:1fr; }
@media(max-width:640px){ .pwg-vs .pwg-grid.post-feed-grid{ grid-template-columns:1fr; } }
/* soft placeholder behind native card images so they don't flash white while loading */
.pwg-grid .ts-preview img{ background-color:var(--pwg-surface-2); }

/* reveal the whole interface at once (top + cards together), not top-then-bottom */
.pwg-vs.pwg-in .pwg-catwrap, .pwg-vs.pwg-in .pwg-body{ animation:pwg-appfade .35s ease both; }
@keyframes pwg-appfade{ from{ opacity:0; } to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .pwg-vs.pwg-in .pwg-catwrap, .pwg-vs.pwg-in .pwg-body{ animation:none; } }

.pwg-empty{ text-align:center; padding:50px 20px; color:var(--pwg-muted); }
.pwg-empty h3{ color:var(--pwg-ink); margin:0 0 6px; }
.pwg-empty-clear{ margin-top:16px; border:none; background:var(--pwg-accent); color:#fff; font:inherit; font-weight:700; padding:12px 26px; border-radius:11px; cursor:pointer; transition:background .14s; }
.pwg-empty-clear:hover{ background:var(--pwg-accent-ink); }
.pwg-more-wrap{ text-align:center; margin:24px 0; }
.pwg-more{ border:1px solid var(--pwg-border-strong); background:var(--pwg-surface); color:var(--pwg-ink); font:inherit; font-weight:600; padding:11px 26px; border-radius:999px; cursor:pointer; }
.pwg-more:hover{ border-color:var(--pwg-accent); color:var(--pwg-accent); }

/* results-head right cluster + filters buttons */
.pwg-rh-right{ display:flex; align-items:center; gap:10px; }
.pwg-filters-btn{ display:none; align-items:center; gap:7px; border:1px solid var(--pwg-border-strong); background:var(--pwg-surface); color:var(--pwg-ink); font:inherit; font-size:13px; font-weight:600; padding:8px 13px; border-radius:8px; cursor:pointer; }
.pwg-filters-btn:hover{ border-color:var(--pwg-accent); color:var(--pwg-accent); }
.pwg-badge{ background:var(--pwg-accent); color:#fff; border-radius:999px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:0 5px; }

.pwg-morefilters{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px; padding:14px; border:1px solid var(--pwg-ink); background:var(--pwg-ink); color:#fff; font:inherit; font-size:14px; font-weight:700; border-radius:12px; cursor:pointer; box-shadow:0 2px 6px -2px rgba(44,43,40,.35); transition:background .14s, border-color .14s, box-shadow .14s; }
.pwg-morefilters:hover{ background:#1c1b19; border-color:#1c1b19; box-shadow:0 7px 18px -7px rgba(44,43,40,.5); }
.pwg-morefilters .pwg-mfn{ background:#fff; color:var(--pwg-ink); }
.pwg-mfn{ background:var(--pwg-accent-soft); color:var(--pwg-accent-ink); border-radius:999px; padding:1px 8px; font-size:12px; }

/* filter drawer — sits above the site header (nothing pokes through) but below the WP admin bar */
.pwg-backdrop{ position:fixed; inset:0; background:rgba(20,24,20,.42); opacity:0; visibility:hidden; transition:opacity .25s; z-index:2147483646; }
.pwg-vs.pwg-drawer-open .pwg-backdrop{ opacity:1; visibility:visible; }
.pwg-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--pwg-surface); box-shadow:-12px 0 40px -18px rgba(0,0,0,.45); transform:translateX(100%); transition:transform .28s ease; z-index:2147483647; display:flex; flex-direction:column; }
.pwg-vs.pwg-drawer-open .pwg-drawer{ transform:none; }
.pwg-drawer-grip{ display:none; }   /* only shown as a grab handle in phone bottom-sheet mode */
.pwg-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--pwg-border); }
.pwg-drawer-title{ font-size:17px; font-weight:700; color:var(--pwg-ink); }
.pwg-drawer-x{ border:none; background:transparent; color:var(--pwg-muted); cursor:pointer; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pwg-drawer-x:hover{ background:var(--pwg-surface-2); color:var(--pwg-ink); }
.pwg-drawer-body{ flex:1; overflow-y:auto; padding:0 16px 8px; }
/* sticky search box for jumping to a filter by name */
.pwg-drawer-search{ position:sticky; top:0; z-index:1; background:var(--pwg-surface); padding:12px 0 10px; margin-bottom:2px; }
.pwg-drawer-search svg{ position:absolute; left:12px; top:22px; width:16px; height:16px; color:var(--pwg-muted); pointer-events:none; }
.pwg-drawer-search input{ width:100%; padding:10px 12px 10px 36px; border:1px solid var(--pwg-border-strong); border-radius:9px; font:inherit; font-size:14px; color:var(--pwg-ink); background:var(--pwg-surface-2); }
.pwg-drawer-search input:focus{ outline:none; border-color:var(--pwg-accent); box-shadow:0 0 0 3px var(--pwg-accent-soft); background:var(--pwg-surface); }
.pwg-drawer-list .pwg-facet{ border-bottom:1px solid var(--pwg-border); }
.pwg-drawer-list .pwg-facet:last-child{ border-bottom:none; }
/* WeddingWire feel: airier rows, chevron on the LEFT of the label (row-reverse), options indented
   under the section header so they align past the chevron gutter. */
.pwg-drawer-list .pwg-fsum{ padding:18px 4px; font-size:16px; flex-direction:row-reverse; justify-content:flex-end; gap:14px; }
.pwg-drawer-list .pwg-fsum:hover{ background:transparent; color:var(--pwg-ink); }
.pwg-drawer-list .pwg-chev{ color:var(--pwg-muted); }
.pwg-drawer-list .pwg-fbody{ padding:0 4px 18px 34px; }
.pwg-drawer-list .pwg-opt{ padding:11px 0; font-size:15px; }
.pwg-drawer-empty{ color:var(--pwg-muted); padding:28px 0; text-align:center; }
.pwg-drawer-foot{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--pwg-border); }
/* "Clear all" is a quiet text link (WeddingWire), the primary "Show results (N)" is the filled button. */
.pwg-drawer-clear{ flex:none; border:none; background:transparent; color:var(--pwg-muted); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; padding:11px 4px; cursor:pointer; }
.pwg-drawer-clear:hover{ color:var(--pwg-ink); }
.pwg-drawer-done{ flex:none; border:none; background:var(--pwg-accent); color:#fff; font:inherit; font-weight:700; padding:14px 26px; border-radius:10px; cursor:pointer; }
.pwg-drawer-done:hover{ background:var(--pwg-accent-ink); }
body.pwg-noscroll{ overflow:hidden; }
/* Phones: WeddingWire-style bottom sheet — full width, slides up from the bottom with rounded top
   corners, leaving the top of the (dimmed) page peeking above it. Not a full-height takeover. */
@media(max-width:640px){
	.pwg-drawer{ top:auto; bottom:0; left:0; right:0; width:100%; max-height:90vh; height:auto;
		border-radius:20px 20px 0 0; box-shadow:0 -10px 40px -12px rgba(0,0,0,.42); transform:translateY(100%); }
	.pwg-vs.pwg-drawer-open .pwg-drawer{ transform:none; }
	/* Grab handle + drag zone (grip and header) for swipe-down-to-dismiss. */
	.pwg-drawer-grip{ display:block; width:40px; height:5px; border-radius:3px; background:var(--pwg-border-strong);
		margin:10px auto 0; flex:none; touch-action:none; }
	.pwg-drawer-grip, .pwg-drawer-head{ touch-action:none; }
}

@media(max-width:1024px){
	.pwg-body{ grid-template-columns:1fr; }
	.pwg-rail{ display:none; }
	.pwg-filters-btn{ display:inline-flex; }
}
@media(max-width:640px){
	/* Controls get their own full-width row under the title. WeddingWire-style: no Sort on phones —
	   Filters gets the room and fills the row next to the view toggle. */
	.pwg-results-head{ gap:12px; }
	.pwg-rh-right{ width:100%; gap:10px; }
	.pwg-sort{ display:none; }                    /* drop Sort entirely on phones (WeddingWire pattern) */
	.pwg-filters-btn{ flex:1; justify-content:center; padding:12px 16px; font-size:14px; }
	.pwg-count-t{ font-size:21px; }
}