/* «Woman Owned» (2026-11-05): seal, profile pill, featured directory filter and the form question. Original lumHUB design.
   Loaded by layout.php on public directory pages and on the business forms; the shared directory bundles stay untouched. */
:root{--wo-ring:conic-gradient(from 0deg,#8a3dff,#4a52ff 60deg,#2f8bff 100deg,#ff2d8a 150deg,#ff5aa8 195deg,#2fc6ee 235deg,#ff3d9a 290deg,#c43be2 330deg,#8a3dff);--wo-ink:#17122b}

/* Seal: gradient ring + white disc; the SVG inside holds the emblem and the words. */
.wo-seal{--wo-size:112px;box-sizing:border-box;display:inline-block;flex:none;width:var(--wo-size);height:var(--wo-size);padding:calc(var(--wo-size) * .07);border-radius:50%;background:var(--wo-ring);box-shadow:0 0 0 2px #fff,0 16px 32px -14px rgb(12 6 32 / .75);line-height:0}
.wo-seal-disc{display:block;width:100%;height:100%;border-radius:50%;background:#fff;overflow:hidden}
.wo-seal svg{display:block;width:100%;height:100%}
/* The shell styles every svg as a line icon (fill:none; stroke:currentColor); the seal and emblem are filled artwork. */
.wo-seal svg,.wo-mark svg{fill:none;stroke:none}
.wo-seal text{font-family:var(--font-display);font-weight:700;fill:var(--wo-ink);stroke:none;letter-spacing:0}
.profile-cover>.wo-seal{position:absolute;top:18px;right:18px;z-index:3}
.business-result-card .result-media>.wo-seal,.result-media>.wo-seal{--wo-size:66px;position:absolute;top:10px;right:10px;z-index:3;box-shadow:0 0 0 1.5px #fff,0 10px 22px -10px rgb(12 6 32 / .8)}
.wo-seal-form{--wo-size:92px}
@media(max-width:39.99rem){.profile-cover>.wo-seal{--wo-size:84px;top:12px;right:12px}.wo-seal-form{--wo-size:72px}}
@media(min-width:64rem){.profile-cover>.wo-seal{--wo-size:124px;top:22px;right:22px}}
@media(prefers-reduced-motion:no-preference){.profile-cover>.wo-seal{animation:wo-arrive .7s cubic-bezier(.2,.9,.25,1.2) both .15s}@keyframes wo-arrive{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}}

/* Emblem on its own (pill, filter). */
.wo-mark{display:inline-block;flex:none;width:22px;height:22px;line-height:0}
.wo-mark svg{display:block;width:100%;height:100%}

/* Profile: pill next to the opening status. */
.wo-pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 14px 5px 6px;border:1.5px solid transparent;border-radius:999px;background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,var(--wo-ring) border-box;color:var(--color-ink);font:600 var(--text-sm)/1.3 var(--font-body)}
.wo-pill .wo-mark{width:24px;height:24px;padding:2px;border-radius:50%;background:#fff}
.wo-pill small{font-weight:500;font-size:var(--text-xs);color:var(--color-muted)}

/* Directory: featured filter, a toggle over the `attr` filter. */
.wo-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin:var(--space-lg) 0 0}
.wo-filter{display:inline-flex;align-items:center;gap:12px;min-height:56px;max-width:100%;padding:8px 10px 8px 8px;border:2px solid transparent;border-radius:999px;background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,var(--wo-ring) border-box;color:var(--color-ink);text-decoration:none;box-shadow:0 10px 26px -18px rgb(70 30 140 / .7);transition:transform .2s ease,box-shadow .2s ease}
.wo-filter .wo-mark{width:38px;height:38px;padding:5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgb(23 18 43 / .1)}
.wo-filter-text{display:grid;gap:1px;min-width:0;line-height:1.25}
.wo-filter-text strong{font:700 var(--text-sm)/1.25 var(--font-display);letter-spacing:.01em}
.wo-filter-text small{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--color-muted)}
.wo-filter-text small svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wo-filter .facet-count{display:inline-grid;place-items:center;min-width:32px;height:32px;margin-left:4px;padding:0 8px;border-radius:999px;background:var(--color-soft);font:700 var(--text-xs)/1 var(--font-body);color:var(--color-ink)}
.wo-filter[aria-current]{background:var(--wo-ring) border-box;color:#fff;box-shadow:0 14px 30px -16px rgb(120 40 200 / .85)}
.wo-filter[aria-current] .wo-filter-text small{color:rgb(255 255 255 / .9)}
.wo-filter[aria-current] .facet-count{background:rgb(255 255 255 / .94);color:var(--wo-ink)}
.wo-filter:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(hover:hover){.wo-filter:hover{transform:translateY(-1px);box-shadow:0 16px 32px -16px rgb(120 40 200 / .75)}}
@media(prefers-reduced-motion:reduce){.wo-filter{transition:none}.wo-filter:hover{transform:none}}

/* Form: the question with the seal it earns. */
/* Specific enough to beat `.business-form fieldset` (directory.css) and the wizard's borderless panels (business-wizard.css). */
.wo-question,.business-form fieldset.wo-question,.business-wizard[data-wizard-on] .wizard-panel>fieldset.wo-question{margin-top:var(--space-lg);padding:var(--space-md) var(--space-lg) var(--space-lg);border:2px solid transparent;border-radius:var(--radius-lg,16px);background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,var(--wo-ring) border-box}
/* A floated legend sits inside the frame instead of cutting the gradient border. */
.wo-question>legend{float:left;width:100%;margin:0 0 var(--space-md);padding:0;font:700 var(--text-md,1.125rem)/1.3 var(--font-display);color:var(--color-ink)}
.wo-question-body{clear:both;display:flex;align-items:flex-start;gap:var(--space-lg)}
.wo-question-text{display:grid;gap:var(--space-sm);min-width:0}
.wo-question-help{margin:0;color:var(--color-ink);line-height:1.55}
.wo-question-choices{margin:0}
.wo-question[disabled]{opacity:.75}
@media(max-width:39.99rem){.wo-question{padding:var(--space-md)}.wo-question-body{gap:var(--space-md)}}