*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--white:#fff;--warm-1:#F2F3F1;--warm-2:#ECEEE9;--warm-3:#E8EDE5;--rule:#D0D0CE;--muted:#808080;--dark:#111111;--text:#444;--accent:#3A6B2A;--accent-light:#E8EDE5}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--text);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
a, a:where(:visited, :hover, :active) {color:inherit;text-decoration:none}
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);padding:0 var(--mobile-gutter, 52px);height:66px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-size:16px;font-weight:700;color:var(--dark)}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:13px;font-weight:500;color:var(--text);opacity:.6;transition:opacity .2s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--dark)}
.nav-cta{font-size:13px;font-weight:600;color:#fff;background:var(--dark);padding:10px 22px;border-radius:100px;transition:background .2s}
.nav-cta:hover{background:#333}
.page-hero{position:relative;padding:120px var(--mobile-gutter, 52px) 80px;background:url("../images/vendors-01.webp") center/cover no-repeat}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(10,16,8,.62)}
.page-hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:14px}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);flex-shrink:0}
.page-hero h1{font-size:var(--mobile-gutter, 52px);font-weight:700;line-height:1.1;color:#fff;letter-spacing:-.5px;margin-bottom:16px}
.page-hero p{font-size:16px;color:rgba(255,255,255,.80);max-width:560px;line-height:1.7}
.controls{background:#fff;border-bottom:1px solid var(--rule);padding:20px var(--mobile-gutter, 52px) 16px;position:sticky;top:66px;z-index:50}
.controls-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.search-wrap{position:relative;width:100%}
.search-wrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--muted)}
#searchInput{width:100%;padding:14px 20px 14px 50px;border:1.5px solid var(--rule);border-radius:100px;font-family:"DM Sans",sans-serif;font-size:15px;color:var(--dark);background:var(--warm-1);outline:none;transition:border .2s,background .2s}
#searchInput:focus{border-color:var(--accent);background:#fff}
.divider{display:none}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}.chip{font-size:12px;font-weight:500;padding:7px 18px;border-radius:100px;border:1px solid var(--rule);background:#fff;cursor:pointer;transition:all .15s;color:var(--text);white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--dark);border-color:var(--dark);color:#fff}
.directory{max-width:1200px;margin:0 auto;padding:56px var(--mobile-gutter, 52px) 80px}
.group-block{margin-bottom:64px}
.group-block.hidden{display:none}
.group-title{font-size:22px;font-weight:700;color:var(--dark)}
.group-divider{height:2px;background:var(--rule);margin-top:10px;margin-bottom:14px}
.subcat-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.subcat-pill{font-size:11px;font-weight:400;padding:5px 14px;border-radius:100px;border:1px solid var(--rule);background:var(--warm-1);cursor:pointer;transition:all .15s;color:var(--text);white-space:nowrap}
.subcat-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.subcat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.vendor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vcard{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px 22px;transition:box-shadow .2s,transform .2s}
.vcard:hover{box-shadow:0 6px 24px rgba(20,28,18,.08);transform:translateY(-2px)}
.vcard.hidden{display:none}
.vcard-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:var(--accent-light);padding:3px 8px;border-radius:4px;margin-bottom:8px}
.vcard-biz{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:3px}
.vcard-contact{font-size:12px;color:var(--muted);margin-bottom:10px}
.vcard-details{display:flex;flex-direction:column;gap:5px}
.vcard-detail{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text)}
.vcard-detail svg{width:12px;height:12px;stroke:var(--accent);flex-shrink:0}
.vcard-detail a:hover{color:var(--accent)}
.no-results{text-align:center;padding:80px 0;color:var(--muted);font-size:15px;display:none}
footer{background:#fff;border-top:1px solid var(--rule);padding:48px var(--mobile-gutter, 52px)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.footer-brand{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:6px}
.footer-legal{font-size:11px;line-height:1.6;color:var(--muted)}
.footer-links{display:flex;gap:24px;font-size:12px}
.footer-links a{color:var(--text);opacity:.6;transition:opacity .2s}
.footer-links a:hover{opacity:1}

/* NAV DROPDOWN */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text, #444); opacity: .6; transition: opacity .2s; background: none; border: none; font-family: inherit; padding: 0; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.open { opacity: 1; color: var(--dark, #111); }
.nav-dropdown-toggle.active, .nav-dropdown-toggle.active.open { opacity: 1; color: var(--dark, #111); }
.nav-dropdown-toggle svg { transition: transform .2s; }
.nav-dropdown-toggle.open svg { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #D0D0CE; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); padding: 8px; min-width: 210px; display: none; z-index: 400; }
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a { display: block; padding: 11px 16px; font-size: 13px; font-weight: 500; color: #444; border-radius: 7px; opacity: 1 !important; white-space: nowrap; transition: background .15s; }
.nav-dropdown-menu a:hover { background: #F2F3F1; color: #111; }
.nav-dropdown-menu .menu-divider { height: 1px; background: var(--rule); margin: 6px 8px; }
.nav-dropdown-menu a.external { display: flex; align-items: center; gap: 8px; }
.nav-dropdown-menu a.external svg { opacity: .4; flex-shrink: 0; }
.nav-dropdown-menu a.active { color: #3A6B2A; font-weight: 600; }

footer { background: #fff; border-top: 1px solid var(--rule, #D0D0CE); padding: 48px var(--mobile-gutter, 52px); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-legal { font-size: 11px; line-height: 1.6; color: var(--muted, #808080); margin-top: 8px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; }
.footer-links a { color: var(--text, #444); opacity: .6; transition: opacity .2s; }
.footer-links a:hover { opacity: 1; }

/* Converted CTA buttons from <button> to <a> for real navigation. */
a.btn-white, a.btn-ghost-white, a.btn-accent, a.btn-dark, a.btn-ghost,
a.btn-outline, a.btn-primary, a.hero-btn, a.cta-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}