/* Lesprom Network — Suppliers directory: by product.
   Loads after tokens.css, homepage.css and internal-header.css. */

/* <div> content wrap */
.lp-sdir-1{
  max-width:1360px;
  margin:0 auto;
  padding:28px clamp(16px,4vw,40px) 90px;
}

/* <h1> */
.lp-sdir-2{
  margin:0 0 8px;
  font-family:var(--lp-font-display);
  font-weight:600;
  font-size:clamp(22px,4vw,28px);
  color:var(--lp-ink);
}

/* <div> — “Verified wood, timber and lumber suppliers, gro” */
.lp-sdir-3{
  margin:0 0 26px;
  font-size:15px;
  color:#8a938d;
}

/* <div> filter wrap */
.lp-sdir-4{
  position:relative;
  max-width:420px;
  margin-bottom:34px;
}

/* <div> filter field */
.lp-sdir-5{
  display:flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 14px;
  background:#f7f8f7;
  border:1px solid transparent;
  border-radius:10px;
  transition:border-color .14s ease,background-color .14s ease;
}
.lp-sdir-5:focus-within{
  border-color:#bcd6c9;
}

/* <img> search icon */
.lp-sdir-6{
  width:14px;
  height:14px;
  opacity:.35;
  flex-shrink:0;
}

/* <input> */
.lp-sdir-7{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  font-family:var(--lp-font-nav);
  font-size:14px;
  color:var(--lp-ink);
}

/* <span> clear button (×) — shown by JS once the field has text */
.lp-sdir-8{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex-shrink:0;
  cursor:pointer;
  color:#9aa3a0;
  font-size:15px;
  line-height:1;
}

/* <div data-dir="grid"> category grid, 3 columns */
.lp-sdir-9{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px 32px;
}

/* <div> — “Logs & Standing Timber” group heading */
.lp-sdir-10{
  font-size:13px;
  font-weight:500;
  color:#8a938d;
  margin-bottom:10px;
}

/* <a> category row */
.lp-sdir-11{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  margin:0 -10px;
  border-radius:7px;
  border-bottom:1px solid #f2f3f2;
  text-decoration:none;
  color:var(--lp-ink);
}
.lp-sdir-11:last-child{
  border-bottom:none;
}
.lp-sdir-11:hover{
  color:var(--lp-green);
  background:var(--lp-hover-grey);
  text-decoration:none;
}

/* <span> — “Softwood Logs” */
.lp-sdir-12{
  font-size:15px;
  font-weight:400;
}

/* <span> — “2,840” count */
.lp-sdir-13{
  flex-shrink:0;
  font-size:13px;
  color:#b0b6b2;
}

/* <div> no-results state — hidden by default, shown when the filter matches nothing */
.lp-sdir-14{
  padding:70px 0;
  text-align:center;
  color:#8a938d;
  font-size:15px;
}

@media (max-width:960px){
  .lp-sdir-9{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:620px){
  .lp-sdir-9{grid-template-columns:1fr !important}
}