/* search.css — search UI (R1-07): the suggestions list of the header / hero / /search fields
   (search-suggest.js) and the hero of the /search page (mockup v2 search.html).
   Not in base.css: the base+listing budget (≤ 60 000 bytes) has no room, and the list is not
   first-screen anyway. The /search page links this file as a normal stylesheet (its hero IS the
   first screen); every other page gets it from search-suggest.js after load, so it never holds
   the first paint there. The mockup has no suggestions design: the list borrows the burger
   menu's look (base.css .burger-menu / .burger-item) — same surface, radius, row height. */

.header-search{position:relative;}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:70;max-height:min(70vh,560px);overflow-y:auto;
  padding:7px;background:#171212;border:1px solid rgba(255,255,255,0.1);border-radius:15px;
  text-align:left;font-family:var(--font-body);overscroll-behavior:contain;}
.sugg[hidden]{display:none;}
/* .container is its own stacking context (z-index:1, base.css) and the footer after it has the same
   z-index, so an open list would slip under the footer on a short page (empty /search). */
.container:has(.sugg:not([hidden])){z-index:2;}
.sugg-h{padding:10px 13px 6px;color:var(--text-3);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.sugg-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 8px 6px 13px;border-radius:11px;
  color:#e0d0ca;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;}
.sugg-opt:hover,.sugg-opt.is-active{background:#241c1b;color:#fff;}
.sugg-opt[aria-disabled="true"]{cursor:default;color:var(--text-3);background:none;}
.sugg-opt::before{content:"";flex:none;width:18px;height:18px;background:center/18px 18px no-repeat;}
.sugg-opt--cat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e83323' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");}
.sugg-opt--recent::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8a84' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");}
.sugg-opt--model::before{content:none;}
.sugg-ava{flex:none;width:32px;height:32px;border-radius:9px;object-fit:cover;background:#241c1b;}
.sugg-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sugg-sub{flex:0 1 auto;min-width:0;margin-left:auto;padding-left:8px;color:var(--text-3);font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sugg-del{flex:none;margin-left:auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;color:var(--text-3);font-size:20px;line-height:1;}
.sugg-del:hover{background:rgba(232,51,35,0.18);color:#fff;}

/* /search hero: the mockup's inline values (main padding-top 28 + hero 24 0 30, lead without the
   bottom margin) as one modifier. A long query must wrap inside the H1, not widen the page. */
.hero--search{padding:52px 0 30px;}
.hero--search .lead{margin-bottom:0;}
.search-lead-hl{color:#d7cbd2;font-weight:700;}
.hero--search .h1{overflow-wrap:anywhere;}
.srch-hint{margin:16px 0 0;text-align:center;color:var(--text-3);font-size:14px;}