.directory {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #231e1a;
}
.directory-wrap { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.directory-hero {
  background: linear-gradient(90deg, #1c130ff0, #1c130f75 66%, #1c130f35),
    url("/assets/classifieds-hero.webp") center / cover;
  background-color: #35251e;
  color: #fff;
  padding: 1.25rem 0 3.5rem;
}
.directory-search {
  display: grid;
  grid-template-columns: 1.35fr 1fr auto;
  gap: .75rem;
  align-items: end;
  padding: .85rem;
  background: #fff;
  color: #231e1a;
  border-radius: .7rem;
}
.directory-search label, .results-bar label { margin: 0; }
.directory-search input, .directory-search select { margin: .25rem 0 0; min-height: 2.9rem; }
.directory button, .directory-cta {
  border-radius: .45rem;
  background: #a63b00;
  color: white;
  font-weight: 700;
  padding: .7rem 1.1rem;
}
.directory-search button { margin: 0; min-height: 2.9rem; }
.directory-intro { max-width: 37rem; padding-top: clamp(2rem, 6vw, 5rem); }
.directory-intro h1 { font-size: clamp(1.85rem, 4.5vw, 3.35rem); line-height: 1.25; }
.directory-cta { display: inline-block; text-decoration: none; }
.directory-results { padding-block: 2.5rem 3rem; }
.category-shortcuts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.category-shortcuts button {
  margin: 0;
  background: #fff;
  color: #442716;
  border: 1px solid #dfd2ca;
}
.category-shortcuts button[aria-pressed="true"] { background: #fff0e7; border-color: #a63b00; }
.results-bar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.results-bar h2 { margin: 0; }
#business-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.directory #business-list article { border: 1px solid #e7dfd7; border-radius: .7rem; padding: 1.1rem; }
.directory #business-list h3 { margin: 0; }
.directory #business-list a { display: inline-block; color: #853000; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .directory-search { grid-template-columns: 1fr; }
  .results-bar { align-items: stretch; flex-direction: column; }
}

.directory-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .35rem max(1rem, calc((100% - 72rem) / 2));
  background: #fff;
  color: #231e1a;
  font-size: .875rem;
  line-height: 1.45;
}
.directory-nav details { position: relative; }
.directory-nav summary, .directory-nav > a {
  cursor: pointer;
  display: block;
  padding: .55rem .2rem;
  color: inherit;
  font-weight: 650;
  text-decoration: none;
}
.directory-nav summary { display: list-item; }
.directory-nav ul {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  width: min(30rem, calc(100vw - 2rem));
  margin: 0;
  padding: .65rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e7dfd7;
  border-radius: .55rem;
  box-shadow: 0 10px 24px #26170f22;
}
.directory-nav details:not([open]) ul { display: none; }
.directory-nav li a { display: block; padding: .55rem .65rem; color: inherit; text-decoration: none; border-radius: .3rem; }
.directory-nav li a:hover, .directory-nav li a:focus-visible { background: #fff0e7; }
.category-shortcuts button { font-size: .875rem; }

.directory-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem);
  padding: 0;
  background: transparent;
}
.directory-top > a { display: block; background: white; padding: .45rem; border-radius: .4rem; }
.directory-top img { width: 108px; }
.directory-hero .directory-nav { margin-top: .35rem; padding: 0; color: #fff; background: transparent; }
.directory-nav ul { color: #231e1a; }
.results-bar { flex-wrap: wrap; }
.results-bar h2 { margin-inline-end: auto; }
@media (max-width: 640px) {
  .directory-top { grid-template-columns: 1fr; }
  .directory-top > a { justify-self: start; }
}

.directory-query { position: relative; }
#business-matches {
  position: absolute;
  z-index: 3;
  inset: 100% 0 auto;
  margin: .25rem 0 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid #e7dfd7;
  border-radius: .5rem;
  background: #fff;
  color: #231e1a;
  box-shadow: 0 8px 22px #26170f25;
  font-size: .875rem;
}
#business-matches li { padding: 0; }
#business-matches li + li { border-top: 1px solid #ede9e5; }
#business-matches button {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .65rem;
  color: inherit;
  background: transparent;
  text-align: start;
  font-size: inherit;
}
#business-matches button:hover, #business-matches button:focus-visible { background: #fff0e7; }

#business-matches strong, #business-matches small { display: block; }
#business-matches small { margin-top: .15rem; color: #625b55; }
.business-match-icon {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  position: relative;
  color: #514941;
}
.business-match-icon::before {
  content: "";
  position: absolute;
  inset: 1px 4px 4px 1px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.business-match-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  background: currentColor;
  right: 0;
  bottom: 2px;
  transform: rotate(45deg);
}