/* Costa's Meat Market: site search (top-right icon, overlay, blog search box, /search/ page).
   Uses the same color tokens as site.css and the socials page. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar: language switch in the middle, search icon on the right ---------- */
.topbar { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 0 22px; min-height: 38px; }
.topbar .langbar { margin: 0 auto; }
.search-open {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--rule, #D8CCB4); background: var(--paper-2, #FBF7EE); color: var(--ink, #15120E);
  text-decoration: none; box-shadow: var(--shadow, none);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.search-open:hover { border-color: var(--ink, #15120E); color: var(--red-ink, #8E0F15); }
.search-open:active { transform: translateY(-50%) scale(.94); }
.search-open svg { display: block; }

/* ---------- search box ---------- */
.search-box {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--paper-2, #FBF7EE); border: 1.5px solid var(--ink, #15120E); border-radius: 999px;
  padding: 5px 5px 5px 16px; box-shadow: var(--shadow, none);
  text-align: left;
}
.search-box:focus-within { border-color: var(--red, #B0141B); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #B0141B) 22%, transparent); }
.search-box > svg { flex: none; color: var(--ink-soft, #6A6154); }
.search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink, #15120E);
  font: inherit; font-size: 16px; /* 16px keeps iOS from zooming in */
  padding: 9px 2px; -webkit-appearance: none; appearance: none;
}
.search-box input::placeholder { color: var(--ink-soft, #6A6154); opacity: .85; }
.search-box input::-webkit-search-cancel-button { cursor: pointer; }
.search-overlay input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-box button {
  flex: none; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--red, #B0141B); color: #fff;
  font-family: "Oswald", Impact, sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; line-height: 1;
}
.search-box button:hover { background: var(--red-ink, #8E0F15); }
.search-inline { margin: 20px auto 0; max-width: 560px; }
.search-page .search-box { margin: 18px 0 6px; }

/* ---------- results ---------- */
.srch-list { text-align: left; }
.srch-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-2, #FBF7EE); border: 1px solid var(--rule, #D8CCB4); border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(21, 18, 14, .55); padding: 6px;
}
.srch-group + .srch-group { margin-top: 6px; border-top: 1px solid var(--rule, #D8CCB4); padding-top: 6px; }
.srch-cat {
  margin: 4px 8px 4px; font-family: "Oswald", Impact, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft, #6A6154);
}
.srch-row { display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.srch-item {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: 8px; color: var(--ink, #15120E); text-decoration: none;
}
.srch-item:hover, .srch-item.is-active, .srch-item:focus-visible { background: var(--tag, #E7DDC7); outline: 0; }
.srch-item.is-active { box-shadow: inset 3px 0 0 var(--red, #B0141B); }
.srch-item img, .srch-ic {
  flex: none; width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--tag, #E7DDC7);
}
.srch-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--red-ink, #8E0F15); }
.srch-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.srch-t { font-weight: 700; line-height: 1.25; }
.srch-s, .srch-m {
  font-size: 14px; color: var(--ink-soft, #6A6154); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.srch-m { font-size: 12px; -webkit-line-clamp: 1; letter-spacing: .02em; }
.srch-at { font-weight: 700; color: var(--ink, #15120E); }
.srch-list mark, .search-results mark { background: transparent; color: var(--red-ink, #8E0F15); font-weight: 700; }
.srch-top .srch-t { font-size: 1.05em; }
.srch-buy, .srch-alt {
  flex: none; font-family: "Oswald", Impact, sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--rule, #D8CCB4); border-radius: 999px; padding: 6px 10px;
  color: var(--red-ink, #8E0F15); background: var(--paper, #F2ECDE); margin-right: 4px;
}
.srch-buy:hover, .srch-alt:hover { border-color: var(--red-ink, #8E0F15); }
.srch-hint, .srch-all {
  display: block; margin: 4px; padding: 10px 12px; border-radius: 8px; font-weight: 700; text-decoration: none;
  color: var(--red-ink, #8E0F15);
}
.srch-hint { background: var(--tag, #E7DDC7); }
.srch-all:hover, .srch-hint:hover { text-decoration: underline; }
.srch-empty { padding: 12px; color: var(--ink-soft, #6A6154); }
.srch-empty p { margin: 0 0 6px; }
.srch-empty strong { color: var(--ink, #15120E); }
.srch-keys { margin: 6px 12px 4px; font-size: 12px; color: var(--ink-soft, #6A6154); }
@media (hover: none) { .srch-keys { display: none; } }

/* ---------- overlay ---------- */
.srch-lock, .srch-lock body { overflow: hidden; }
.srch-overlay { position: fixed; inset: 0; z-index: 1000; }
.srch-overlay[hidden] { display: none; }
.srch-backdrop { position: absolute; inset: 0; background: rgba(21, 18, 14, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.srch-dialog {
  position: relative; margin: 8vh auto 0; width: min(640px, calc(100% - 24px));
  max-height: 84vh; display: flex; flex-direction: column;
  background: var(--paper, #F2ECDE); border: 1.5px solid var(--ink, #15120E); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); padding: 10px; color: var(--ink, #15120E);
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5;
}
.srch-dialog .srch-list { overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.srch-dialog .srch-list:empty { display: none; }
.srch-close {
  background: transparent !important; color: var(--ink-soft, #6A6154) !important;
  border: 1px solid var(--rule, #D8CCB4) !important; font-size: 11px !important; padding: 8px 10px !important;
}
@media (max-width: 560px) {
  .srch-dialog { margin: 0; width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; padding: 10px 10px 0; }
  .srch-item img, .srch-ic { width: 44px; height: 44px; }
}

/* ---------- /search/ page ---------- */
.search-page header.site { margin-bottom: 0; }
.search-status { min-height: 1.5em; margin: 6px 4px 8px; font-size: 14px; color: var(--ink-soft, #6A6154); }
.search-results .srch-group { background: var(--paper-2, #FBF7EE); border: 1px solid var(--rule, #D8CCB4); border-radius: 10px; padding: 6px; margin: 0 0 12px; }
.search-results .srch-group + .srch-group { border-top: 1px solid var(--rule, #D8CCB4); padding-top: 6px; margin-top: 0; }
.search-results .srch-item img, .search-results .srch-ic { width: 64px; height: 64px; }
.search-explore .chips { justify-content: flex-start; margin-bottom: 18px; }
.search-explore .section-title { margin-top: 18px; }