/* Highlight the complete search field, rather than a square around its text. */
#site-header .header-search,.shop-search { transition:border-color .16s,box-shadow .16s,background .16s; }
#site-header .header-search:focus-within,.shop-search:focus-within { border-color:#83a38b; background:#fff; box-shadow:0 0 0 3px #54794812; }
#site-header .header-search input:focus,#site-header .header-search input:focus-visible,.shop-search input:focus,.shop-search input:focus-visible { outline:none; box-shadow:none; }
#site-header .header-search:has(input:focus-visible),.shop-search:has(input:focus-visible) { outline:none; border-color:#547948; box-shadow:0 0 0 3px #54794818; }
#site-header .header-search input,.shop-search input { color:#173d30; caret-color:#173d30; }
/* Suggestions live outside the header so sticky and mobile layouts cannot clip them. */
.search-suggestions { position:fixed; z-index:45; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; background:#fff; border:1px solid #e0e7df; border-radius:18px; box-shadow:0 12px 32px #173d3021; }
.search-suggestions-heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 6px 0 16px; background:#fff; border-bottom:1px solid #edf0eb; color:#66736b; font:500 11px/1.3 var(--body); }
.search-suggestions-heading button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%; }
.search-suggestions-heading button:hover { background:#e3ece2; }
.search-suggestions-heading svg { width:17px; height:17px; }
.search-suggestion { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:72px; margin:0 8px; padding:9px 8px; border-bottom:1px solid #edf0eb; color:var(--ink); text-decoration:none; }
.search-suggestion img { width:42px; height:54px; border-radius:8px; object-fit:cover; object-position:center 20%; background:#f0f1ed; }
.search-suggestion-copy { min-width:0; }
.search-suggestion-copy strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:600 12px/1.45 var(--body); overflow-wrap:anywhere; }
.search-suggestion-copy > span { display:block; margin-top:3px; color:#65746a; font-size:10px; line-height:1.4; }
.search-suggestion-price { max-width:85px; color:#173d30; text-align:right; font:600 11px/1.35 var(--body); }
.search-suggestion:hover,.search-suggestion[aria-selected=true],.search-suggestions-all:hover,.search-suggestions-all[aria-selected=true] { background:#edf4e9; color:#173d30; border-radius:9px; }
.search-suggestions-all { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin:5px 8px; padding:10px 8px; color:#173d30; font:500 11px/1.5 var(--body); }
.search-suggestions-all > .search-all-copy { min-width:0; overflow-wrap:anywhere; }
.search-suggestions-all > svg { width:18px; height:18px; }
.search-keyboard-hint { padding:0 14px 11px; color:#66736b; font-size:10px; }
.search-no-results { padding:16px; color:#56645b; font-size:12px; line-height:1.7; }
body:has(dialog[open]) .search-suggestions { display:none; }
.search-suggestions-open .whatsapp-help { opacity:0; visibility:hidden; pointer-events:none; }
@media (max-width:900px) {
  /* Keep a focused search row available when the on-screen keyboard scrolls the page. */
  body #site-header .header-discover:focus-within,body.is-scrolled #site-header .header-discover:focus-within { display:flex; }
  body #site-header .header-discover:focus-within .header-search,body.is-scrolled #site-header .header-discover:focus-within .header-search { display:flex; }
  .search-suggestion { grid-template-columns:38px minmax(0,1fr) auto; min-height:66px; gap:9px; padding:8px 6px; }
  .search-suggestion img { width:38px; height:48px; }
  .search-suggestion-copy strong { font-size:11px; }
  .search-suggestion-copy > span { font-size:9px; }
  .search-suggestion-price { max-width:72px; font-size:10px; }
  .search-keyboard-hint { display:none; }
  .shop-search input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { #site-header .header-search,.shop-search { transition:none; } }