/* ViCo Green Directory -- scoped `dir-` prefixed styles only.
   Loaded via {% block extra_css %} on directory pages only (perf budget
   DIR-30: one file, small, never touches the sitewide Bootstrap4/Bulma
   soup already shipping on every page). Tokens per
   docs design brief V1.0 (real hex values sampled from the live site). */

:root {
  --dir-purple: #6B2A7E;
  --dir-purple-dark: #633179;
  --dir-green: #8AC43F;
  --dir-green-soft: #9ec9a5;
  --dir-blue: #4AABE7;
  --dir-grey: #A5A7AA;
  --dir-bg-panel: #F4F4F4;
  --dir-ink: #363636;
  --dir-white: #FFFFFF;
  --dir-warn: #DE6339;
}

.dir-page { color: var(--dir-ink); }
.dir-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* -- slim utility-page header strip (brief 4.1-4.4: no full hero) -- */
/* Sitewide .log_head_links (~130px) + #main_navbar (fixed, top:124px,
   height:60px) float over page content (position:fixed, transparent-over-hero
   pattern) -- every real content page must clear them with top padding/margin
   on its first visible block, same approach as vico_events .vico-reg-hero
   (padding-top:140px). Directory utility pages have no hero image, so this
   is a plain top-padding bump on the purple strip rather than a hero banner. */
.dir-strip {
  background: var(--dir-purple);
  color: var(--dir-white);
  padding: 194px 0 22px;
}
@media (max-width: 767px) {
  /* sitewide #main_navbar (desktop menu bar) hides on mobile -- only the
     ~130px .log_head_links logo bar remains fixed above content */
  .dir-strip { padding-top: 140px; }
}
.dir-strip h1 { color: var(--dir-white); margin: 0 0 6px; font-size: 1.6rem; }
.dir-strip p { margin: 0; opacity: .85; }

/* Listing detail's breadcrumb+lang-switch row sits directly on the page
   background (no purple .dir-strip band -- it belongs visually with the
   gallery below it, not the header), but still needs the exact same fixed
   sitewide-header clearance every other directory page gets via
   .dir-strip's padding-top, or it renders invisible under the fixed logo
   bar (desktop) / collides with the logo text (mobile). Same values as
   .dir-strip for that reason -- this is header clearance, not page-specific
   spacing, so it must track any future change to those numbers together. */
.dir-listing-topbar { padding-top: 194px; padding-bottom: 16px; }
@media (max-width: 767px) {
  .dir-listing-topbar { padding-top: 140px; }
}
.dir-strip-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* -- language switcher -- */
.dir-lang-switch { font-size: .85rem; white-space: nowrap; }
.dir-lang-switch__link { color: rgba(255,255,255,.7); text-decoration: none; padding: 2px 4px; }
.dir-lang-switch__link.is-active { color: var(--dir-white); font-weight: 700; }
.dir-lang-switch__sep { color: rgba(255,255,255,.4); margin: 0 2px; }

/* -- search bar -- */
.dir-search-bar { display: flex; gap: 8px; margin-top: 18px; max-width: 640px; }
.dir-search-bar input[type="text"], .dir-search-bar input[type="search"] {
  flex: 1; border: none; padding: 12px 16px; font-size: 1rem;
}
.dir-search-bar button {
  background: var(--dir-purple);
  color: var(--dir-white);
  border: none;
  padding: 12px 22px;
  font-variant: all-small-caps;
  cursor: pointer;
}
.dir-search-bar button:hover { background: var(--dir-purple-dark); }

/* -- category chips -- */
.dir-chip-row { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.dir-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  background: var(--dir-bg-panel);
  color: var(--dir-ink);
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #e2e2e2;
}
.dir-chip.is-active { background: var(--dir-purple); color: var(--dir-white); border-color: var(--dir-purple); }
.dir-chip__count { color: var(--dir-grey); font-size: .8em; margin-left: 4px; }

/* -- verification badge -- */
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px; /* only deliberate rounded element on the site */
  padding: 3px 12px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--dir-white);
  text-decoration: none;
}
.dir-badge--listed { background: var(--dir-grey); }
.dir-badge--reviewed { background: var(--dir-blue); }
.dir-badge--verified { background: var(--dir-green); }
.dir-badge--lg { padding: 6px 18px; font-size: .95rem; }
.dir-badge__help { color: inherit; opacity: .85; font-weight: 400; }

/* -- score dots -- */
.dir-score { font-size: .85rem; }
.dir-score__row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dir-score__label { width: 110px; color: var(--dir-ink); }
.dir-score__dots { display: inline-flex; gap: 4px; }
.dir-score__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(165,167,170,.25); display: inline-block; }
.dir-score__dot.is-filled { background: var(--dir-green); }
.dir-score--compact .dir-score__row { margin: 0; }
.dir-score--compact .dir-score__label { display: none; }

/* -- machine translation flag -- */
.dir-mt-flag { color: var(--dir-grey); font-size: .78rem; text-transform: lowercase; display: block; margin-top: 2px; }

/* -- cards -- */
.dir-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 400px) { .dir-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .dir-card-grid { grid-template-columns: repeat(4, 1fr); } }

.dir-card {
  background: var(--dir-bg-panel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--dir-ink);
}
.dir-card__name { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--dir-ink); }
.dir-card__meta { font-size: .82rem; color: #666; }
.dir-card__desc { font-size: .9rem; color: var(--dir-ink); }

.dir-card--featured { border-top: 2px solid var(--dir-green-soft); position: relative; }
.dir-card--featured-label {
  display: inline-block;
  background: var(--dir-white);
  color: var(--dir-green);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  align-self: flex-start;
}

.dir-card-stack { display: flex; flex-direction: column; gap: 16px; }
.dir-card-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.dir-card-scroll .dir-card { min-width: 260px; }

/* -- result rows (search: list, not grid, on mobile) -- */
.dir-result-list { display: flex; flex-direction: column; gap: 0; }
.dir-result-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6;
  text-decoration: none;
  color: var(--dir-ink);
}
.dir-result-row__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dir-result-row__name { font-weight: 700; font-size: 1.05rem; }
.dir-result-row__type { color: var(--dir-grey); font-size: .8rem; text-transform: uppercase; }

/* -- facets -- */
.dir-facets-toggle {
  display: inline-block;
  background: var(--dir-white);
  border: 1px solid var(--dir-purple);
  color: var(--dir-purple);
  padding: 8px 16px;
  font-variant: all-small-caps;
  text-decoration: none;
  margin-bottom: 12px;
}
.dir-facets { background: var(--dir-bg-panel); padding: 16px; margin-bottom: 20px; }
.dir-facets h3 { font-size: .9rem; text-transform: uppercase; margin: 14px 0 6px; }
.dir-facets h3:first-child { margin-top: 0; }
.dir-facets ul { list-style: none; margin: 0; padding: 0; }
.dir-facets li { margin: 2px 0; }
.dir-facets a { color: var(--dir-ink); text-decoration: none; font-size: .9rem; }
.dir-facets a:hover { color: var(--dir-purple); }
.dir-facets .is-selected a { color: var(--dir-purple); font-weight: 700; }
.dir-facets__close { display: none; }

/* Brief 4.2: below the lg breakpoint, filters are a full-screen bottom-sheet
   overlay opened by the "Filters" button (directory.js toggles
   .dir-facets--open), NOT a permanently visible inline block. Base rule
   here hides .dir-facets by default on mobile; directory.js is
   progressive enhancement only, so the toggle link still works as a
   plain #dir-facets anchor jump with JS disabled (spec requirement) --
   it just won't get the overlay treatment in that case. */
@media (max-width: 991px) {
  .dir-facets {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
    margin-bottom: 0;
  }
  .dir-facets.dir-facets--open { display: block; }
  .dir-facets__close { display: block; }
  body.dir-no-scroll { overflow: hidden; }
}

@media (min-width: 992px) {
  .dir-search-layout { display: flex; gap: 24px; align-items: flex-start; }
  .dir-search-layout .dir-facets { flex: 0 0 25%; position: sticky; top: 16px; }
  .dir-search-layout .dir-results { flex: 1; }
  .dir-facets-toggle { display: none; }
}

.dir-active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dir-active-filter { background: var(--dir-white); border: 1px solid var(--dir-grey); padding: 4px 10px; font-size: .82rem; text-decoration: none; color: var(--dir-ink); }
.dir-active-filter::after { content: " \00d7"; color: var(--dir-warn); font-weight: 700; }

/* -- sponsor banner -- */
.dir-sponsor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--dir-bg-panel);
  padding: 14px 20px;
  margin: 18px 0;
  text-decoration: none;
  color: var(--dir-ink);
}
.dir-sponsor-banner img { max-height: 40px; }
.dir-sponsor-banner__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dir-grey); }

/* -- listing detail -- */
.dir-gallery { display: flex; flex-direction: column; gap: 8px; }
.dir-gallery__hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--dir-bg-panel); }
.dir-gallery__hero--placeholder { display: flex; align-items: center; justify-content: center; color: var(--dir-grey); }
.dir-gallery__thumbs { display: flex; gap: 6px; overflow-x: auto; }
.dir-gallery__thumbs img { width: 72px; height: 54px; object-fit: cover; }

.dir-breadcrumb { font-size: .82rem; color: var(--dir-grey); }
.dir-breadcrumb a { color: var(--dir-grey); }

.dir-detail-section { margin: 22px 0; }
.dir-detail-section h2 { font-size: 1.05rem; margin-bottom: 8px; }

.dir-cert-row, .dir-claim-row { border-bottom: 1px solid #eee; padding: 10px 0; }
.dir-cert-row--expired { text-decoration: line-through; color: var(--dir-grey); }
.dir-cert-row__note { text-decoration: none; display: block; color: var(--dir-warn); font-size: .82rem; }

.dir-provenance { color: var(--dir-grey); font-size: .82rem; margin-top: 24px; }

/* Brief 4.5.8: sticky bottom-fixed action bar is a MOBILE pattern only --
   on desktop the actions render in normal document flow at the end of the
   page. Without this scoping, `position:sticky; bottom:0` pins the bar to
   the bottom of the viewport on every screen size as soon as the page
   loads (correct sticky-to-bottom behavior, but wrong here on desktop --
   it visually overlapped/hid the <h1> listing title because both sat near
   the bottom of a viewport-height-sized area with no scrolled distance
   between them yet). */
.dir-sticky-actions {
  display: flex;
  gap: 10px;
  background: var(--dir-white);
  padding: 12px 0;
  border-top: 1px solid #e6e6e6;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .dir-sticky-actions {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
}
.dir-btn { border: none; padding: 12px 20px; font-variant: all-small-caps; text-decoration: none; display: inline-block; cursor: pointer; }
.dir-btn--website { background: var(--dir-green); color: var(--dir-white); }
.dir-btn--enquire { background: transparent; border: 1px solid var(--dir-purple); color: var(--dir-purple); }
.dir-btn--submit { background: var(--dir-purple); color: var(--dir-white); }
.dir-report-link { color: var(--dir-grey); font-size: .82rem; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; }

/* -- forms -- */
.dir-form-group { margin-bottom: 16px; }
.dir-form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.dir-form-group input[type="text"], .dir-form-group input[type="email"],
.dir-form-group input[type="tel"], .dir-form-group input[type="url"],
.dir-form-group input[type="number"], .dir-form-group select, .dir-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-sizing: border-box;
}
.dir-form-errors { color: var(--dir-warn); font-size: .85rem; margin: 4px 0; }
.dir-form-section { margin: 26px 0; }
.dir-form-section h2 { font-size: 1.1rem; border-bottom: 1px solid #e2e2e2; padding-bottom: 6px; }
.dir-form-help { color: #777; font-size: .82rem; }

/* Honeypot: hidden via CSS (not by omission/JS) so a no-JS bot that
   fills every field it can see still gets caught, per DIR-31. */
.dir-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.dir-repeatable-row { display: flex; gap: 8px; margin-bottom: 8px; }
/* min-width:0 overrides the flex-item default of min-width:auto, which
   otherwise floors each input at its content/browser-default intrinsic
   width and defeats flex:1 shrinking -- two inputs at ~200px min each
   overflowed past a 375px mobile viewport without this (dir-submit,
   claims/certifications repeatable rows, spec sec 4.6). */
.dir-repeatable-row input { flex: 1; min-width: 0; }
@media (max-width: 480px) {
  /* Squeezing a claim + its evidence-link input onto one cramped row reads
     poorly at phone width even once it no longer overflows -- stack them,
     matching the mobile-first single-column intent of the rest of this
     form (spec sec 4.6). */
  .dir-repeatable-row { flex-direction: column; }
}
.dir-add-row-btn {
  background: var(--dir-bg-panel);
  border: 1px dashed var(--dir-grey);
  padding: 8px 14px;
  cursor: pointer;
  font-size: .85rem;
}

.dir-success-banner { background: var(--dir-green-soft); color: #1c3a24; padding: 16px 20px; margin: 16px 0; }
.dir-toast { background: var(--dir-green-soft); color: #1c3a24; padding: 12px 18px; margin-bottom: 14px; }
.dir-toast--error { background: #f6d9cf; color: #7a2c11; }

/* -- methodology page -- */
.dir-rubric-tier { background: var(--dir-bg-panel); padding: 16px; margin-bottom: 12px; }

/* -- misc -- */
.dir-empty-state { padding: 40px 0; text-align: center; color: #666; }
.dir-cta-band { background: var(--dir-purple); color: var(--dir-white); padding: 36px 0; text-align: center; margin-top: 30px; }
.dir-cta-band a.dir-btn--submit { background: var(--dir-green); }

/* =====================================================================
   v2 (DIR-34..38): mega-menu, trust strip, tile grid, news, sourcing,
   best-of badge. Same `dir-` prefix, same one-file/no-framework rules
   as everything above.
   ===================================================================== */

/* -- header "Categories" mega-menu (<details>/<summary>, zero JS) -- */
/* Sitewide chrome renders a fixed logo/utility bar (.log_head_links, ~130px
   desktop / ~118px mobile) plus a sticky main nav row that immediately pins
   itself below that bar. In normal document flow this bar lands underneath
   both -- fully hidden (painted over) and unclickable (pointer events
   intercepted by the fixed bar) -- unless it clears the same offset the
   same way the sitewide nav does: via `position: sticky` with a `top` at
   least as large as the reserved chrome height, so the browser pins it in
   place instead of rendering it at its natural overlapped flow position.
   This does not change the element's flow height, so .dir-strip's existing
   header-clearance padding-top is unaffected by this change. */
.dir-mega-menu { position: sticky; top: 184px; z-index: 15; background: var(--dir-purple-dark); }
@media (max-width: 767px) {
  .dir-mega-menu { top: 118px; }
}
.dir-mega-menu__trigger {
  display: inline-block;
  cursor: pointer;
  color: var(--dir-white);
  font-variant: all-small-caps;
  font-weight: 700;
  padding: 10px 16px;
  list-style: none;
  user-select: none;
}
.dir-mega-menu__trigger::-webkit-details-marker { display: none; }
.dir-mega-menu__trigger:focus-visible { outline: 2px solid var(--dir-green); outline-offset: -2px; }
.dir-mega-menu__panel {
  background: var(--dir-white);
  border-top: 3px solid var(--dir-purple);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .dir-mega-menu__panel {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1280px;
    margin: 0 auto;
  }
}
.dir-mega-menu__col h3 { font-size: .82rem; text-transform: uppercase; color: var(--dir-purple); margin: 0 0 8px; }
.dir-mega-menu__col ul { list-style: none; margin: 0; padding: 0; }
.dir-mega-menu__col li { margin: 4px 0; }
.dir-mega-menu__col a { color: var(--dir-ink); text-decoration: none; font-size: .9rem; }
.dir-mega-menu__col a:hover, .dir-mega-menu__col a:focus-visible { color: var(--dir-purple); text-decoration: underline; }

/* -- footer mega-menu (all 19 sectors + sub-categories, SEO links) -- */
.dir-mega-footer { background: var(--dir-bg-panel); padding: 30px 0; margin-top: 30px; }
.dir-mega-footer__title { font-size: .95rem; text-transform: uppercase; color: var(--dir-grey); margin: 0 0 16px; }
.dir-mega-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) { .dir-mega-footer__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .dir-mega-footer__grid { grid-template-columns: repeat(5, 1fr); } }
.dir-mega-footer__top { display: block; font-weight: 700; color: var(--dir-ink); text-decoration: none; margin-bottom: 6px; font-size: .88rem; }
.dir-mega-footer__col ul { list-style: none; margin: 0; padding: 0; }
.dir-mega-footer__col li { margin: 3px 0; }
.dir-mega-footer__col a { color: #666; text-decoration: none; font-size: .8rem; }
.dir-mega-footer__col a:hover { color: var(--dir-purple); }

/* -- trust strip (live counts) -- */
.dir-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
  padding: 20px;
  background: var(--dir-bg-panel);
  text-align: center;
}
@media (min-width: 768px) { .dir-trust-strip { grid-template-columns: repeat(4, 1fr); } }
.dir-trust-strip__num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--dir-purple); }
.dir-trust-strip__label { display: block; font-size: .82rem; color: #666; }

/* -- category banner (category.html, when Category.image is set) -- */
.dir-cat-banner { width: 100%; max-height: 240px; object-fit: cover; display: block; }

/* -- category tile grid (photo-led, hover/focus reveals sub-categories) -- */
.dir-tile-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .dir-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .dir-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .dir-tile-grid { grid-template-columns: repeat(4, 1fr); } }
.dir-cat-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--dir-white);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--dir-ink);
}
.dir-cat-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dir-cat-tile__img--placeholder { background: linear-gradient(135deg, var(--dir-purple), var(--dir-green)); }
.dir-cat-tile__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.dir-cat-tile__name { display: block; font-weight: 700; font-size: 1rem; }
.dir-cat-tile__count { display: block; font-size: .78rem; opacity: .85; }
.dir-cat-tile__subs {
  position: absolute;
  inset: 0;
  background: rgba(45,15,60,.92);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
.dir-cat-tile:hover .dir-cat-tile__subs,
.dir-cat-tile:focus-within .dir-cat-tile__subs,
.dir-cat-tile:focus .dir-cat-tile__subs {
  opacity: 1;
  visibility: visible;
}
.dir-cat-tile__subs ul { list-style: none; margin: 0; padding: 0; }
.dir-cat-tile__subs li { font-size: .85rem; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.15); }

/* -- featured/sponsored carousel (sec 2.5): horizontal-scroll flex row, no JS -- */
.dir-carousel { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.dir-carousel .dir-card { min-width: 260px; scroll-snap-align: start; flex: 0 0 auto; }

/* -- Directory News & New Additions (sec 2.7) -- */
.dir-news-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .dir-news-layout { grid-template-columns: 2fr 1fr; } }
.dir-news-card { border-bottom: 1px solid #e6e6e6; padding: 14px 0; }
.dir-news-card h4 { margin: 0 0 4px; font-size: 1rem; }
.dir-news-card__meta { color: var(--dir-grey); font-size: .78rem; margin: 4px 0 0; }
.dir-news-recent__list { list-style: none; margin: 0; padding: 0; }
.dir-news-recent__list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
.dir-news-recent__list a { color: var(--dir-ink); text-decoration: none; font-weight: 600; font-size: .92rem; }

/* -- "In the news" section on listing_detail -- */
.dir-news-row { border-bottom: 1px solid #eee; padding: 14px 0; }
.dir-news-row h3 { margin: 0 0 4px; font-size: 1rem; }
.dir-news-count { color: var(--dir-grey); font-weight: 400; font-size: .8rem; }

/* -- AI Sourcing Assistant CTA (homepage sec 2.8) -- */
.dir-sourcing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(120deg, var(--dir-purple), var(--dir-purple-dark));
  color: var(--dir-white);
  padding: 26px 24px;
  margin: 26px 0;
}
.dir-sourcing-cta h2 { color: var(--dir-white); margin: 0 0 4px; }
.dir-sourcing-cta p { margin: 0; opacity: .85; max-width: 520px; }
.dir-sourcing-cta .dir-btn--submit { background: var(--dir-green); flex: 0 0 auto; }

/* -- For Businesses CTA (sec 2.9) -- */
.dir-pricing-tiers { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; }
@media (min-width: 768px) { .dir-pricing-tiers { grid-template-columns: repeat(3, 1fr); } }
.dir-pricing-tier { background: var(--dir-bg-panel); padding: 16px; }
.dir-pricing-tier h3 { margin: 0 0 6px; font-size: .95rem; }
.dir-pricing-tier p { margin: 0; font-size: .85rem; color: #555; }
.dir-for-business__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* -- AI Sourcing Assistant page -- */
.dir-sourcing-form { max-width: 640px; margin: 20px 0; }
.dir-sourcing-form textarea { width: 100%; padding: 12px; font-size: 1rem; box-sizing: border-box; border: 1px solid #ccc; }
.dir-sourcing-table-wrap { overflow-x: auto; }
.dir-sourcing-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.dir-sourcing-table th, .dir-sourcing-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e6e6e6; font-size: .88rem; vertical-align: top; }
.dir-sourcing-table th { text-transform: uppercase; font-size: .74rem; color: var(--dir-grey); }
.dir-sourcing-table__note-row td { border-bottom: 1px solid #e6e6e6; }
.dir-sourcing-table__note { padding-top: 0 !important; color: #555; font-size: .84rem; font-style: italic; }
.dir-sourcing-suggestions { margin: 18px 0; }
.dir-chip-form { display: inline-block; }
.dir-chip-form button.dir-chip { font: inherit; }
.dir-sourcing-broadcast { background: var(--dir-bg-panel); padding: 20px; margin-top: 26px; max-width: 640px; }

/* -- Best-of badge: intentionally NOT a pill, never shares dir-badge's
   shape/color, so it can never be mistaken for the verification badge. -- */
.dir-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #caa227;
  color: #2a1f00;
  border-radius: 2px;
  padding: 3px 10px 3px 6px;
  font-size: .76rem;
  font-weight: 700;
  margin-left: 6px;
}
.dir-best-badge__glyph { color: #fff; }