/* LP Steel — header search box.
   The Divi Search module sits in a header column that is ~5/24 on desktop and
   full-width (24/24) on tablet & phone. Render it as an always-visible
   "Search Products..." box (input + magnifier submit) so it works at every size
   and matches the production site. Submits to WP search (?s=). */

.et_pb_search_0_tb_header,
.et-l--header .et_pb_search {
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  width: 100%;
}

.et_pb_search_0_tb_header .et_pb_searchform,
.et-l--header .et_pb_search .et_pb_searchform { width: 100%; }

/* the input + button share one bordered pill */
.et_pb_search_0_tb_header .et_pb_searchform > div,
.et-l--header .et_pb_search .et_pb_searchform > div {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.et_pb_search_0_tb_header input.et_pb_s,
.et-l--header .et_pb_search input.et_pb_s {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0 !important;
  background: transparent !important;
  color: #262626;
  font-size: 14px;
  padding: .55em .2em .55em .7em !important;
  opacity: 1;
}
.et_pb_search_0_tb_header input.et_pb_s::placeholder { color: #888; }

/* submit rendered as a magnifying-glass icon */
.et_pb_search_0_tb_header input.et_pb_searchsubmit,
.et-l--header .et_pb_search input.et_pb_searchsubmit {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23002b5c' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
  cursor: pointer;
}
.et_pb_search_0_tb_header input.et_pb_searchsubmit:hover { opacity: .7; }

/* mobile: the search column is full-width — give it room and full size */
@media (max-width: 980px) {
  .et_pb_search_0_tb_header { margin: 6px 0; }
  .et_pb_search_0_tb_header input.et_pb_s { padding: .7em .2em .7em .8em !important; }
  .et_pb_search_0_tb_header input.et_pb_searchsubmit { height: 44px; }
}
