/* Artwork search: header button, overlay and /search/ page. */
.search-toggle{position:relative}
.search-toggle svg{width:18px; height:18px}
.search-toggle kbd{display:none}
@media (min-width:1280px){
  .search-toggle{width:auto; padding:0 12px; gap:8px}
  .search-toggle kbd{
    display:inline-block; font:500 11px/1 var(--font); letter-spacing:.04em;
    color:var(--muted); border:1px solid var(--line); padding:3px 5px;
  }
}
html.zs-lock, html.zs-lock body{overflow:hidden}

body > .zs-overlay,.zs-overlay{
  position:fixed; inset:0; z-index:9000;
  display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(12px, 5vh, 64px) 16px 16px;
  visibility:hidden; pointer-events:none;
}
.zs-overlay.is-open{visibility:visible; pointer-events:auto}
.zs-backdrop{
  position:absolute; inset:0;
  background:rgba(10,7,5,.72);
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  opacity:0; transition:opacity .35s ease;
}
.zs-overlay.is-open .zs-backdrop{opacity:1}
.zs-panel{
  position:relative; width:100%; max-width:1120px; max-height:100%;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--dusk-2), var(--dusk));
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(201,161,91,.06) inset;
  opacity:0; transform:translateY(-14px) scale(.985);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.zs-overlay.is-open .zs-panel{opacity:1; transform:none}
.zs-bar,.zs-suggest,.zs-tools{flex:none}
.zs-overlay .zs-results{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 clamp(16px,3vw,32px) clamp(16px,3vw,32px)}

.zs-bar{
  display:flex; align-items:center; gap:14px;
  padding:clamp(14px,2.4vw,26px) clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line);
}
.zs-glass{width:26px; height:26px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round}
.zs-field{position:relative; flex:1; min-width:0}
.zs-input,.zs-ghost{
  font:400 clamp(24px,3.4vw,40px)/1.2 var(--serif); letter-spacing:.01em;
  padding:0; margin:0; border:0; width:100%;
}
.zs-field .zs-input,html[data-theme="light"] .zs-field .zs-input{position:relative; background:transparent; color:var(--wax); outline:none; caret-color:var(--gold); border:0; box-shadow:none; border-radius:0; min-height:0; -webkit-appearance:none; appearance:none}
.zs-field .zs-input:focus{outline:none; border:0}
.zs-field{border-bottom:1px solid transparent; transition:border-color .3s}
.zs-field:focus-within{border-bottom-color:var(--gold)}
.zs-input::placeholder{color:var(--muted); opacity:.75}
.zs-input::-webkit-search-cancel-button{-webkit-appearance:none}
.zs-ghost{position:absolute; inset:0; color:var(--muted); opacity:.55; white-space:pre; overflow:hidden; pointer-events:none}
.zs-ghost-typed{visibility:hidden}
.zs-close{
  flex:none; background:transparent; border:1px solid var(--line); color:var(--wax-dim);
  font:500 12px/1 var(--font); letter-spacing:.08em; padding:8px 10px; cursor:pointer; min-height:36px;
}
.zs-close:hover{color:var(--gold); border-color:var(--gold)}

.zs-suggest{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:14px clamp(16px,3vw,32px) 0;
  min-height:52px;
}
.zs-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px 5px 5px; min-height:38px;
  border:1px solid var(--line); color:var(--wax); text-decoration:none;
  font-size:14px; background:rgba(201,161,91,.04);
  transition:border-color .2s, background .2s, transform .2s;
}
.zs-chip img{width:28px; height:28px; object-fit:cover; display:block}
.zs-chip-col{padding-left:12px}
.zs-chip em{font-style:normal; color:var(--muted); font-size:12px}
.zs-chip:hover,.zs-chip:focus-visible{border-color:var(--gold); background:rgba(201,161,91,.12); outline:none; transform:translateY(-1px)}
.zs-chip mark,.zs-card mark{background:none; color:var(--gold-soft); font-weight:600}

.zs-tools{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px clamp(16px,3vw,32px) 16px;
}
.zs-filters{display:flex; border:1px solid var(--line)}
.zs-filters button{
  background:transparent; border:0; color:var(--wax-dim); cursor:pointer;
  font:500 12px/1 var(--font); letter-spacing:.14em; text-transform:uppercase;
  padding:10px 14px; min-height:38px;
}
.zs-filters button + button{border-left:1px solid var(--line)}
.zs-filters button[aria-pressed="true"]{background:var(--gold); color:var(--ink)}
.zs-count{margin:0; color:var(--muted); font-size:13px; letter-spacing:.04em}

.zs-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:18px;
}
.zs-in .zs-grid li{animation:zs-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 28ms)}
@keyframes zs-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.zs-card{display:block; color:var(--wax); text-decoration:none; outline:none}
.zs-thumb{
  display:block; position:relative; aspect-ratio:4/5; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.zs-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .4s}
.zs-thumb::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:box-shadow .3s}
.zs-card:hover .zs-thumb img,.zs-card:focus-visible .zs-thumb img{transform:scale(1.06)}
.zs-card:focus-visible .zs-thumb::after,.zs-card:hover .zs-thumb::after{box-shadow:inset 0 0 0 2px var(--gold)}
.zs-meta{display:flex; flex-direction:column; gap:2px; padding-top:10px}
.zs-meta strong{font:500 20px/1.2 var(--serif)}
.zs-meta small{color:var(--muted); font-size:12.5px; line-height:1.4}
.zs-status{
  align-self:flex-start; margin-top:6px; font-style:normal;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 7px;
}
.zs-status.is-open{color:var(--gold-soft); border:1px solid var(--line)}
.zs-status.is-sold{color:var(--wax-dim); background:rgba(139,58,42,.35)}
.zs-all{
  display:block; margin:26px auto 4px; width:max-content;
  border:1px solid var(--gold); color:var(--gold); text-decoration:none;
  padding:12px 22px; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
}
.zs-all:hover{background:var(--gold); color:var(--ink)}
.zs-empty{text-align:center; padding:40px 12px 56px; color:var(--wax-dim)}
.zs-empty p:first-child{font:400 26px/1.3 var(--serif); color:var(--wax)}
.zs-empty button{background:none; border:0; border-bottom:1px solid var(--gold); color:var(--gold); cursor:pointer; font:inherit; padding:0}

/* /search/ page */
.zs-page{border:1px solid var(--line); background:linear-gradient(180deg, var(--dusk-2), transparent 320px); margin-top:24px}
.zs-page .zs-results{padding:0 clamp(16px,3vw,32px) clamp(20px,3vw,36px)}

html[data-theme="light"] .zs-backdrop{background:rgba(60,40,20,.38)}
html[data-theme="light"] .zs-panel{box-shadow:0 40px 100px rgba(60,40,20,.35)}
html[data-theme="light"] .zs-thumb{box-shadow:0 8px 22px rgba(80,50,20,.22)}
html[data-theme="light"] .zs-status.is-sold{color:#f6efe4; background:var(--ember)}

@media (max-width:640px){
  .zs-overlay{padding:0}
  .zs-panel{max-height:none; height:100%; border:0}
  .zs-grid{grid-template-columns:repeat(2, 1fr); gap:14px}
  .zs-meta strong{font-size:17px}
  .zs-suggest{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .zs-chip{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .zs-backdrop,.zs-panel,.zs-thumb img,.zs-chip{transition:none}
  .zs-in .zs-grid li{animation:none}
}