/* Search panel under the header (Figma 4636:13369 A1, 4637:13381 A2; mobile = full-screen overlay, frame D note 4641:14099).
   Content column = 1280 (COLUMN RULE), type from the Style Guide: no viewport-scaled sizes. JS: js/ohio-search-panel.js */
.ohio-sr[hidden]{display:none}
.ohio-sr{position:fixed;left:0;right:0;bottom:0;top:var(--ohio-sr-top,148px);z-index:998;font-family:var(--ohio-font-body);color:var(--ohio-text-body)}
.ohio-sr__backdrop{position:absolute;inset:0;background:rgba(27,24,34,.55);animation:ohio-sr-fade .18s ease-out}
.ohio-sr__panel{position:relative;z-index:1;max-height:100%;overflow-y:auto;background:#fff;box-shadow:0 24px 48px -12px rgba(36,18,59,.18);animation:ohio-sr-slide .2s ease-out}
.ohio-sr__inner{max-width:var(--ohio-container,1320px);margin:0 auto;padding:40px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:32px}
@keyframes ohio-sr-fade{from{opacity:0}}
@keyframes ohio-sr-slide{from{transform:translateY(-12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ohio-sr__backdrop,.ohio-sr__panel{animation:none}}
html.ohio-sr-open,html.ohio-sr-open body{overflow:hidden}
html.ohio-sr-open .qh-fb{display:none!important}
/* Flatsome's own dropdown search is replaced once the script runs */
html.ohio-sr-js .header-search-dropdown .nav-dropdown{display:none!important}

.ohio-sr__row{display:flex;gap:16px;align-items:center;margin:0}
.ohio-sr__box{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;box-sizing:border-box;border:1.5px solid var(--ohio-purple-600);border-radius:999px;background:#fff;color:var(--ohio-purple-600)}
.ohio-sr__input,.ohio-sr .ohio-sr__input{flex:1;min-width:0;width:auto;height:auto;margin:0;padding:0;border:0;box-shadow:none;background:transparent;font:400 18px/28px var(--ohio-font-body);color:var(--ohio-text-heading);caret-color:var(--ohio-purple-600);outline:0}
.ohio-sr__input::placeholder{color:var(--ohio-text-muted);opacity:1}
.ohio-sr__input::-webkit-search-cancel-button{display:none}
.ohio-sr__box:focus-within{box-shadow:0 0 0 3px rgba(171,103,219,.25)}
.ohio-sr__hint{flex:none;padding:4px 8px;border-radius:6px;background:var(--ohio-purple-50);font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-sr__box.has-text .ohio-sr__hint{display:none}
.ohio-sr__clear{flex:none;display:inline-flex;align-items:center;gap:4px;margin:0;padding:4px 10px;border:0;border-radius:999px;background:var(--ohio-purple-50);font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-muted);cursor:pointer;text-transform:none;min-height:0}
.ohio-sr__clear[hidden]{display:none}
.ohio-sr__close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:999px;background:var(--ohio-purple-50);color:var(--ohio-purple-700);cursor:pointer;min-height:0}
.ohio-sr__close:hover,.ohio-sr__clear:hover{background:var(--ohio-purple-100)}
.ohio-sr button:focus-visible,.ohio-sr a:focus-visible{outline:2px solid var(--ohio-purple-400);outline-offset:2px}

/* A1: history + popular + group tiles */
.ohio-sr__recent-pop{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:32px}
.ohio-sr-recent[hidden]{display:none}
.ohio-sr-recent[hidden]+.ohio-sr-pop{grid-column:1/-1}
.ohio-sr-groups{grid-column:1/-1}
.ohio-sr-h{margin:0 0 16px;font:600 13px/18px var(--ohio-font-body);letter-spacing:var(--ohio-label-ls);text-transform:uppercase;color:var(--ohio-text-muted)}
.ohio-sr-recent__head{display:flex;justify-content:space-between;align-items:baseline}
.ohio-sr-recent__clear{margin:0;padding:0;border:0;background:none;font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-link);cursor:pointer;text-transform:none;min-height:0}
.ohio-sr-chips{display:flex;flex-wrap:wrap;gap:12px}
.ohio-sr-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--ohio-purple-100);border-radius:999px;background:var(--ohio-purple-50);font:400 16px/26px var(--ohio-font-body);color:var(--ohio-text-heading);text-decoration:none}
.ohio-sr-chip:hover{background:var(--ohio-purple-100);color:var(--ohio-purple-700)}
.ohio-sr-chip .ohio-sr-i{color:var(--ohio-purple-600)}
.ohio-sr-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ohio-sr-tile{display:flex;align-items:center;gap:10px;padding:16px 12px;border:1px solid var(--ohio-purple-100);border-radius:16px;background:#fff;text-decoration:none;color:var(--ohio-purple-700)}
.ohio-sr-tile:hover{border-color:var(--ohio-purple-200);box-shadow:0 8px 24px rgba(36,18,59,.06)}
.ohio-sr-tile__n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--ohio-purple-700);color:#fff;font:600 16px/1 var(--ohio-font-body)}
.ohio-sr-tile__t{flex:1;min-width:0;font:600 16px/26px var(--ohio-font-body)}
.ohio-sr-tile .ohio-sr-i{flex:none;color:var(--ohio-purple-600)}

/* A2: instant suggestions */
.ohio-sr__live[hidden],.ohio-sr__start[hidden]{display:none}
.ohio-sr__live{display:flex;flex-direction:column;gap:32px}
.ohio-sr__cols{display:grid;grid-template-columns:520px minmax(0,1fr);column-gap:48px;align-items:start}
.ohio-sr__col{display:flex;flex-direction:column;gap:24px;min-width:0}
.ohio-sr__col:empty{display:none}
.ohio-sr__g{display:flex;flex-direction:column;gap:8px}
.ohio-sr__gh{display:flex;align-items:center;gap:8px;font:600 13px/18px var(--ohio-font-body);letter-spacing:var(--ohio-label-ls);text-transform:uppercase;color:var(--ohio-text-muted)}
.ohio-sr__gh span{padding:2px 8px;border-radius:999px;background:var(--ohio-purple-50);font:400 14px/20px var(--ohio-font-body);letter-spacing:0;color:var(--ohio-purple-700)}
.ohio-sr__it{display:flex;align-items:center;gap:16px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ohio-text-heading)}
.ohio-sr__it.is-active,.ohio-sr__it:hover{background:var(--ohio-purple-50)}
.ohio-sr__img{flex:none;width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--ohio-purple-50)}
.ohio-sr__it--wide .ohio-sr__img{width:128px;height:67px}
.ohio-sr__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ohio-sr__ti{font:600 16px/26px var(--ohio-font-body);color:var(--ohio-text-heading)}
.ohio-sr__ti b{font-weight:700;color:var(--ohio-purple-600)}
.ohio-sr__mt{font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-sr__it>.ohio-sr-i{flex:none;color:var(--ohio-purple-600);opacity:0}
.ohio-sr__it.is-active>.ohio-sr-i,.ohio-sr__it:hover>.ohio-sr-i{opacity:1}
.ohio-sr__none{margin:0;font:400 16px/26px var(--ohio-font-body);color:var(--ohio-text-muted)}
.ohio-sr__none[hidden],.ohio-sr__all[hidden]{display:none}
.ohio-sr__all{display:flex;align-items:center;gap:8px;padding:16px 20px;border-radius:12px;background:var(--ohio-purple-50);font:600 16px/26px var(--ohio-font-body);color:var(--ohio-text-link);text-decoration:none}
.ohio-sr__all.is-active,.ohio-sr__all:hover{background:var(--ohio-purple-100)}
.ohio-sr__keys{margin-left:auto;display:flex;gap:16px}
.ohio-sr__keys kbd{padding:4px 8px;border-radius:6px;background:#fff;font:400 14px/20px var(--ohio-font-body);color:var(--ohio-text-muted);white-space:pre}
.ohio-sr__skel{height:72px;border-radius:12px;background:linear-gradient(90deg,var(--ohio-purple-50),#fff,var(--ohio-purple-50));background-size:200% 100%;animation:ohio-sr-shim 1.1s linear infinite}
@keyframes ohio-sr-shim{to{background-position:-200% 0}}

@media (max-width:1100px){.ohio-sr__cols{grid-template-columns:1fr;row-gap:24px}.ohio-sr-tiles{grid-template-columns:repeat(2,1fr)}}
/* mobile: full-screen overlay, input sticky on top, one column (frame D note) */
@media (max-width:767px){
  .ohio-sr{top:0;z-index:100000}
  .ohio-sr__backdrop{display:none}
  .ohio-sr__panel{height:100%;box-shadow:none}
  .ohio-sr__inner{padding:0 20px 24px;gap:24px}
  .ohio-sr__row{position:sticky;top:0;z-index:2;padding:16px 0;background:#fff;gap:12px}
  .ohio-sr__box{height:52px;padding:0 16px}
  .ohio-sr__input{font-size:16px}
  .ohio-sr__hint{display:none}
  .ohio-sr__recent-pop{grid-template-columns:1fr}
  .ohio-sr-tiles{grid-template-columns:1fr;gap:12px}
  .ohio-sr__keys{display:none}
  .ohio-sr__all{padding:14px 16px}
}
/* panel open: the nav must not open its dropdowns / mega panels over it when the pointer crosses the bar (owner 16/10) */
html.ohio-sr-open #header .header-bottom .nav > li > .nav-dropdown,
html.ohio-sr-open #header .header-bottom .nav > li > .ohio-mega-panel{display:none!important}
html.ohio-sr-open body #main::before{display:none!important}
html.ohio-sr-open #header .header-bottom .nav > li.has-dropdown:hover > a{box-shadow:none!important}