/* VFind — the public exploded-catalog marketplace.

   VFind has its own palette rather than Partsy's teal: deep indigo → violet for the brand,
   with an electric cyan accent that reads as "found it". It is deliberately its own product
   while still sitting beside Partsy in the same family (same type, same flat/edge styling).

   No build step — served straight from partsy_vfind/static. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  --ink:#0f1330;            /* near-black indigo, for headings and dark surfaces */
  --ink-soft:#1b2350;
  --paper:#f6f6fb;          /* page wash */
  --paper-deep:#e9e9f6;
  --brand:#4f46e5;          /* indigo */
  --brand-2:#a855f7;        /* violet */
  --brand-dark:#3730a3;
  --accent:#06b6d4;         /* electric cyan */
  --accent-soft:#a5f3fc;
  --mint:#10b981;           /* "published"/positive */
  --muted:#5f6486;
  --line:#dedeef;
  --white:#fff;
  /* Legacy names kept so the rest of the sheet reads unchanged. */
  --teal:#4f46e5;
  --electric:#06b6d4;
  --cyan:#cffafe;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.vf-button,.vf-wordmark{font-family:'Space Grotesk',sans-serif}
h1,h2,h3{margin:0 0 12px;letter-spacing:-.03em}
a{color:inherit}
.vf-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- brand mark */
.vf-brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.vf-brand-logo{height:40px;width:auto;display:block}
.vf-mark{display:inline-flex;align-items:center;gap:10px}
.vf-mark svg{width:38px;height:38px;display:block;border-radius:11px;
  box-shadow:0 6px 16px #4f46e533}
.vf-wordmark{font-weight:700;font-size:1.5rem;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(100deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vf-mark-hero svg{width:74px;height:74px;border-radius:22px;box-shadow:0 18px 40px #4f46e53d}
.vf-mark-hero .vf-wordmark{font-size:2.9rem}
.vf-mark-footer svg{width:26px;height:26px;border-radius:8px;box-shadow:none}
.vf-mark-footer .vf-wordmark{font-size:1.05rem}
.vf-mark-hero{flex-direction:column;gap:16px}   /* the landing stacks mark over wordmark */

/* Header + footer */
.vf-header{min-height:74px;padding:0 clamp(18px,5vw,70px);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffd9;
  backdrop-filter:saturate(160%) blur(8px);position:sticky;top:0;z-index:20}
.vf-nav{display:flex;align-items:center;gap:26px;font-size:.9rem}
.vf-nav a{text-decoration:none;color:var(--ink)}
.vf-nav a:hover{color:var(--brand)}
.vf-nav-powered{border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-weight:600}
.vf-nav-powered:hover{border-color:var(--brand);color:var(--brand)}
/* The seller's way in, given the same weight as a nav item rather than a banner hope. */
.vf-nav-add{font-weight:700;color:var(--brand)}
.vf-nav-add:hover{text-decoration:underline}

/* Search in the header. The marketplace's single action, and a catalog page is exactly where
   a visitor needs it: they arrive from a search engine on one catalog, and if it is not the
   assembly they wanted there is otherwise nowhere to go but back. */
.vf-header-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;max-width:440px;
  margin:0 clamp(12px,3vw,30px);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:4px 4px 4px 14px;
  transition:border-color .15s ease,box-shadow .15s ease}
.vf-header-search:focus-within{border-color:var(--brand);box-shadow:0 8px 20px #4f46e51f}
.vf-header-search-icon{display:inline-flex;flex:none;color:var(--muted)}
.vf-header-search-icon svg{width:18px;height:18px;display:block}
.vf-header-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:9px 2px;font:inherit;font-size:.92rem;color:var(--ink)}
.vf-header-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.vf-header-search button{flex:none;border:0;cursor:pointer;padding:9px 16px;border-radius:999px;
  color:#fff;font:600 .84rem 'DM Sans',sans-serif;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));transition:filter .15s ease}
.vf-header-search button:hover{filter:saturate(115%)}
.vf-header-search button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* The footer carries the site's own pages as well as the brand and the tagline, so it is a
   wrapping flex row rather than a fixed grid: the items spread across a wide screen and stack
   on a phone, and nothing is squeezed off the edge at the widths in between. */
.vf-footer{padding:26px clamp(18px,5vw,70px);display:flex;flex-wrap:wrap;align-items:center;
  gap:14px 26px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);
  background:var(--white)}
.vf-brand-footer{color:var(--ink)}
/* The tagline absorbs the slack, which is what keeps the brand and the tagline on the left and
   the page links and the credit on the right. */
.vf-footer-tagline{margin-right:auto}
.vf-footer-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.vf-footer-links a{color:var(--muted);text-decoration:none;font-weight:600}
.vf-footer-links a:hover{color:var(--brand);text-decoration:underline}
.vf-powered{text-decoration:none;color:var(--brand);font-weight:700}
.vf-powered span{color:var(--accent)}

/* ---------------------------------------------------------------- landing
   The front page is one thing: a search box. The mark sits above it, a row of category
   chips below, and nothing else competes — the way a search engine's front page works. */
.vf-home{position:relative;overflow:hidden;padding:clamp(48px,9vh,110px) clamp(18px,6vw,90px) 60px;
  background:
    radial-gradient(900px 420px at 12% -10%, #a855f733, transparent 70%),
    radial-gradient(760px 380px at 88% 0%, #06b6d42e, transparent 72%),
    linear-gradient(180deg,#fbfbff,var(--paper))}
.vf-home-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.vf-home-logo{max-height:74px;max-width:min(320px,80vw);height:auto;margin-bottom:18px}
.vf-home-title{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.02;letter-spacing:-.045em;
  margin:6px 0 12px;
  background:linear-gradient(96deg,var(--ink) 20%,var(--brand) 60%,var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* What actually happens, in one sentence — the page is a search box, so this is the only
   place a first-time visitor is told what the image they are about to open behaves like. */
.vf-home-sub{max-width:620px;margin:0 0 26px;color:var(--muted);font-size:1.02rem;line-height:1.55}
/* View → Find → Buy as a caption under the box: three beats, one line, no section weight. */
.vf-home-steps{list-style:none;counter-reset:vfstep;display:flex;flex-wrap:wrap;
  gap:10px 22px;justify-content:center;margin:24px 0 0;padding:0}
.vf-home-steps li{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.vf-home-steps li strong{color:var(--ink);font-weight:700}
.vf-home-steps li::before{counter-increment:vfstep;content:counter(vfstep);flex:none;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;
  font:700 .72rem 'DM Sans',sans-serif;
  background:linear-gradient(120deg,var(--brand),var(--brand-2))}

/* The big box. One input, a leading glyph, and a gradient button — nothing else. */
.vf-bigsearch{display:flex;align-items:center;gap:8px;width:100%;background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:0 18px 45px #1b23501f;transition:box-shadow .2s ease,border-color .2s ease}
.vf-bigsearch:focus-within{border-color:var(--brand);box-shadow:0 22px 55px #4f46e536}
.vf-bigsearch-icon{display:inline-flex;flex:none;color:var(--muted)}
.vf-bigsearch-icon svg{width:22px;height:22px;display:block}
.vf-bigsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 4px;
  font:inherit;font-size:1.05rem;color:var(--ink)}
.vf-bigsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.vf-bigsearch-go{flex:none;border:0;cursor:pointer;padding:13px 24px;border-radius:999px;color:#fff;
  font:600 .95rem 'DM Sans',sans-serif;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 24px #4f46e540;transition:transform .15s ease,filter .15s ease}
.vf-bigsearch-go:hover{transform:translateY(-1px);filter:saturate(115%)}
.vf-bigsearch-compact{border-radius:14px;box-shadow:0 10px 30px #1b235014;padding:5px 5px 5px 16px}
.vf-bigsearch-compact input{font-size:.98rem;padding:10px 4px}
.vf-bigsearch-compact .vf-bigsearch-go{border-radius:10px;padding:11px 20px}

/* Category / brand dropdowns under the box, submitting through a hidden form. */
.vf-home-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-end;
  margin-top:18px;width:100%}
.vf-home-filters label{display:grid;gap:4px;text-align:left;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vf-home-filters select{min-width:180px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--white);font:inherit;font-size:.9rem;color:var(--ink);outline:0}
.vf-home-filters select:focus{border-color:var(--brand)}
.vf-home-filters-go{border:1px solid var(--line);background:var(--white);color:var(--ink);
  cursor:pointer;padding:11px 16px;border-radius:10px;font:600 .85rem 'DM Sans',sans-serif}
.vf-home-filters-go:hover{border-color:var(--brand);color:var(--brand)}

.vf-home-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:24px 0 0;padding:0}
.vf-home-chips a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:#ffffffb8;border:1px solid var(--line);text-decoration:none;font-size:.85rem;
  font-weight:600;color:var(--ink)}
.vf-home-chips a:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.vf-home-chips span{color:var(--muted);font-weight:700;font-size:.72rem}
.vf-home-foot{margin:26px 0 0;color:var(--muted);font-size:.85rem}
.vf-home-foot a{color:var(--brand);font-weight:700;text-decoration:none}
.vf-home-foot a:hover{text-decoration:underline}
.vf-results-home{padding-top:8px}
.vf-query{color:var(--muted);font-weight:500;letter-spacing:-.01em}

/* Hero + search (results page) */
.vf-hero{padding:clamp(28px,4vw,44px) clamp(18px,6vw,90px) 32px;background:var(--white);
  border-bottom:1px solid var(--line)}
.vf-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand);margin:0 0 14px}
.vf-hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1;letter-spacing:-.045em;margin:0 0 16px;max-width:640px}
.vf-lede{max-width:560px;color:var(--muted);font-size:1.08rem;margin:0 0 26px}
.vf-stats{list-style:none;display:flex;flex-wrap:wrap;gap:28px;margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.vf-stats li{display:grid;gap:2px}
.vf-stats strong{font:700 1.6rem 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.vf-stats span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

.vf-search{display:grid;gap:14px;background:var(--white);border:0;padding:0;box-shadow:none}
.vf-search-title{display:none}
.vf-search-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.vf-search label{display:grid;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vf-search select,.vf-search input{width:100%;border:1px solid var(--line);background:var(--paper);padding:12px;font:inherit;color:var(--ink);border-radius:10px;outline:0;transition:border-color .15s ease,background .15s ease}
.vf-search select:focus,.vf-search input:focus{border-color:var(--brand);background:#fff}
.vf-button{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border:0;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;font-weight:600;font-size:.94rem;
  cursor:pointer;text-decoration:none;border-radius:12px;box-shadow:0 10px 22px #4f46e534;
  transition:transform .15s ease,filter .15s ease}
.vf-button:hover{transform:translateY(-1px);filter:saturate(115%);color:#fff}

/* Section headings, shared by every block below the hero */
.vf-section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.vf-section-head h1,.vf-section-head h2{font-size:1.5rem;letter-spacing:-.03em;margin:0}
.vf-cat-hero{max-width:760px;padding:0 0 8px}
.vf-cat-hero h1{font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.035em;margin:0 0 10px}
.vf-cat-hero .vf-lede{margin-bottom:12px}
.vf-cat-note{margin:6px 0 0;color:var(--muted);font-size:.86rem}
.vf-section-note{color:var(--muted);font-size:.86rem}

/* Category tiles: image-led, one card per category.
   Three across, matching the admin screen's own grid (its cards are Bootstrap col-xl-4),
   and a 16/10 media box matching the admin thumbnail — so the same picture is the same
   size and shape wherever it is seen, and neither view crops it differently. */
.vf-categories{padding:44px clamp(18px,6vw,90px) 10px}
.vf-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vf-cat{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.vf-cat:hover{transform:translateY(-4px);box-shadow:0 20px 42px #1b23501f;border-color:#c4b5fd}
.vf-cat-media{position:relative;display:block;aspect-ratio:16/10;background:var(--paper-deep);overflow:hidden}
.vf-cat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vf-cat:hover .vf-cat-media img{transform:scale(1.04)}
.vf-cat-initial{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,#312e81,#7c3aed);color:var(--accent-soft);font:700 2.6rem 'Space Grotesk',sans-serif;letter-spacing:-.04em}
/* The "+ Add your catalog" tile: same shape as a category, deliberately different colour
   so it reads as the way in rather than as a twelfth category. */
.vf-cat-add .vf-cat-media{background:linear-gradient(135deg,#0e7490,#06b6d4)}
.vf-cat-plus{display:grid;place-items:center;width:100%;height:100%;color:#fff;font:700 3rem 'Space Grotesk',sans-serif;line-height:1}
.vf-cat-add .vf-cat-count{color:#0e7490}
.vf-cat-add:hover{border-color:var(--accent)}
.vf-cat-body{display:grid;gap:6px;padding:18px 18px 20px}
.vf-cat-body strong{font:600 1.1rem 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.vf-cat-tagline{color:var(--muted);font-size:.88rem;line-height:1.4}
.vf-cat-count{margin-top:4px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}

/* Brand chips */
.vf-brands-section{padding:34px clamp(18px,6vw,90px) 10px}
.vf-brands{display:flex;flex-wrap:wrap;gap:10px}
.vf-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;background:var(--white);border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:600;transition:border-color .15s ease,background .15s ease,color .15s ease}
.vf-chip:hover{border-color:var(--brand);background:#fff;color:var(--brand)}
.vf-chip span{color:var(--muted);font-weight:700;font-size:.76rem}

/* Results */
.vf-results{padding:44px clamp(18px,6vw,90px) 90px}
.vf-clear{color:var(--brand);font-weight:700;text-decoration:none;font-size:.88rem}
.vf-clear:hover{text-decoration:underline}
.vf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.vf-card{display:flex;flex-direction:column;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:14px;text-decoration:none;padding:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.vf-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px #1b23501f;border-color:#c4b5fd}
.vf-card-thumb{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;aspect-ratio:4/3;overflow:hidden}
.vf-card-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease}
.vf-card:hover .vf-card-thumb img{transform:scale(1.03)}
.vf-card-brand{font:600 .68rem 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.vf-card-title{font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.vf-card-title span{color:var(--muted);font-weight:500}
.vf-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.vf-tag{background:var(--paper-deep);color:var(--ink);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.vf-card-meta{color:var(--muted);font-size:.82rem}
.vf-empty{padding:50px 0;color:var(--muted);text-align:center}
.vf-empty a{color:var(--brand);font-weight:700;text-decoration:none}

/* One catalog */
/* The head is deliberately short: the diagram is the page, so the title block must not push
   it down. Two columns on a wide screen (title | instruction + links) instead of one stack —
   that alone is ~100px, which is the difference between the viewer starting above the fold
   on a laptop and below it. */
.vf-catalog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:10px clamp(24px,4vw,60px);
  padding:clamp(16px,2.4vw,26px) clamp(18px,6vw,90px) 16px}
.vf-catalog-title{flex:1 1 auto;min-width:0}
.vf-catalog-head .vf-kicker{margin:0 0 6px}
.vf-catalog-head h1{margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.035em}
.vf-catalog-head h1 span{color:var(--muted)}
.vf-catalog-aside{flex:0 1 460px;min-width:0}
.vf-catalog-head .vf-lede{margin:0 0 10px;font-size:.95rem;max-width:none}
.vf-catalog-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:0}
/* No top padding: the head already ends where the frame should begin. */
.vf-catalog-wrap{padding:0 clamp(18px,6vw,90px) 72px}
/* Centred, so it lines up with the note and the share panel beneath it — left-aligned, it
   sits up to ~80px off on a wide screen and the three read as three different columns. */
.vf-catalog-frame{max-width:1080px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px #1b235018}
.vf-catalog-chrome{display:flex;align-items:center;gap:6px;padding:11px 15px;background:linear-gradient(120deg,#312e81,var(--brand-dark))}
.vf-catalog-chrome span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.vf-catalog-chrome em{margin-left:10px;font:500 .74rem 'Space Grotesk',sans-serif;font-style:normal;letter-spacing:.04em;color:#c7d2fe}
.vf-catalog-page{padding:26px clamp(16px,3vw,34px) 34px}
.vf-catalog-note{max-width:1080px;margin:16px auto 0;color:var(--muted);font-size:.86rem}

/* Sharing */
.vf-share{max-width:1080px;margin:38px auto 0;padding:24px 26px;background:var(--white);border:1px solid var(--line)}
.vf-share-copy h2{font-size:1.15rem;letter-spacing:-.02em;margin:0 0 4px}
.vf-share-copy p{color:var(--muted);font-size:.88rem;margin:0 0 18px;max-width:620px}
.vf-share-row{display:flex;flex-wrap:wrap;gap:10px}
.vf-share-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:600 .86rem 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;border-radius:10px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.vf-share-btn:hover{border-color:var(--brand);background:#eef2ff;transform:translateY(-1px)}
.vf-share-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vf-share-btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.vf-share-status{min-height:20px;margin:14px 0 0;font-size:.84rem;font-weight:600;color:var(--brand)}

/* Add-catalog page */
.vf-add-hero{padding:clamp(40px,6vw,80px) clamp(18px,6vw,90px) 40px;
  background:
    radial-gradient(760px 360px at 10% -20%, #a855f72e, transparent 70%),
    radial-gradient(680px 340px at 92% 0%, #06b6d42b, transparent 72%),
    linear-gradient(180deg,#fbfbff,var(--paper))}
.vf-add-hero h1{font-size:clamp(2.2rem,5.4vw,4rem);line-height:1;letter-spacing:-.045em;margin:0 0 16px;max-width:760px}
.vf-add-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.vf-button-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.vf-button-ghost:hover{background:var(--paper-deep);color:var(--ink)}
.vf-add-note{color:var(--muted);font-size:.86rem;margin:18px 0 0;max-width:620px}
.vf-steps-section{padding:44px clamp(18px,6vw,90px) 10px}
.vf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vf-step{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--line);padding:22px 24px}
.vf-step-num{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  font:700 1rem 'Space Grotesk',sans-serif;box-shadow:0 6px 16px #4f46e533}
.vf-step strong{display:block;font:600 1.08rem 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin-bottom:6px}
.vf-step p{margin:0;color:var(--muted);font-size:.92rem}
.vf-step em{color:var(--ink);font-style:normal;font-weight:600}
.vf-add-cta{max-width:1080px;margin:44px auto 90px;padding:30px 32px;border-radius:18px;color:#fff;
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,#312e81,var(--brand) 45%,var(--brand-2));
  box-shadow:0 24px 55px #4f46e536}
.vf-add-cta h2{font-size:1.5rem;letter-spacing:-.03em;margin:0 0 6px}
.vf-add-cta p{margin:0;color:#e0e7ff;font-size:.94rem;max-width:560px}
.vf-add-cta .vf-button{background:#fff;color:var(--brand-dark);box-shadow:0 10px 24px #1b23503d}
.vf-add-cta .vf-button:hover{background:#f5f3ff;color:var(--brand-dark)}
.vf-add-cta .vf-button-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #ffffff6b}
.vf-add-cta .vf-button-ghost:hover{background:#ffffff1f;color:#fff}

/* Launch page: the channels a catalog can be shared to.
   A list of what each channel is for, not a row of share buttons — this page has no catalog of
   its own to share, and a button that shared the wrong thing would be worse than none. The
   buttons a seller will actually use are on the catalog page, once they have one. */
.vf-channels-section{padding:34px clamp(18px,6vw,90px) 10px}
.vf-channels{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vf-channel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
/* The same glyphs the catalog page's share row uses, so what this page promises is what the
   seller finds there. Inheriting the fill keeps the two outlined icons (Instagram, Email)
   outlined, because their own ``fill="none"`` beats an inherited value. */
.vf-channel-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:12px;
  border-radius:11px;background:#eef2ff;color:var(--brand)}
.vf-channel-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.vf-channel strong{display:block;font:600 1rem 'Space Grotesk',sans-serif;letter-spacing:-.02em;
  margin-bottom:6px}
.vf-channel p{margin:0;color:var(--muted);font-size:.9rem}
.vf-channels-foot{max-width:900px;margin:16px 0 0;color:var(--muted);font-size:.88rem}
.vf-channels-foot strong{color:var(--ink)}
@media(max-width:820px){.vf-steps{grid-template-columns:1fr}}
@media(max-width:520px){
  /* Icon-and-label buttons wrap two to a row rather than four cramped ones. */
  .vf-share{padding:20px 18px}
  .vf-share-btn{flex:1 1 calc(50% - 5px);justify-content:center}
}

@media(max-width:980px){
  /* Two category tiles across, the same step down as the admin grid (col-md-6). */
  .vf-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  /* The result page's three dropdowns become two, then one. */
  .vf-search-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  /* The search box wraps: a full-width field above a full-width button, which is the only
     arrangement that stays usable on a phone. */
  .vf-bigsearch{flex-wrap:wrap;border-radius:18px;padding:10px}
  .vf-bigsearch input{flex:1 1 100%;padding:12px 8px}
  .vf-bigsearch-go{flex:1 1 100%;border-radius:12px}
  .vf-home-filters{flex-direction:column;align-items:stretch}
  .vf-home-filters select{min-width:0;width:100%}
  .vf-search-filters{grid-template-columns:1fr}
  /* The header search takes its own full-width row rather than squeezing the nav: at this
     width, brand + search + nav on one line leaves the field too narrow to show a query. */
  .vf-header{flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
  .vf-header-search{order:3;flex:1 1 100%;max-width:none;margin:0}
  .vf-catalog-aside{flex:1 1 100%}
}
@media(max-width:620px){
  /* The footer stacks, brand first: four items on one line is unreadable at this width. */
  .vf-footer{flex-direction:column;align-items:flex-start}
  .vf-footer-tagline{margin-right:0}
  .vf-stats{gap:20px}
  .vf-cat-grid,.vf-grid,.vf-channels{grid-template-columns:1fr}
  .vf-nav{gap:16px;font-size:.84rem}
}