/* Search result store marks — easy revert */
#search-results [role="option"] > a,
.shop-search-sheet #search-results a{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
}
.search-store-mark{
  flex:0 0 28px;
  width:28px; height:28px;
  border-radius:8px;
  object-fit:cover;
  margin-top:2px;
  box-shadow:0 0 0 1px rgba(229,209,165,.28);
}
.search-result-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

/* Urdu RTL result rows */
html[lang="ur"] #search-results [role="option"] > a,
html[lang="ur"] .search-result-copy{
  text-align:right;
}
/* v6n17: rows already run dir=rtl, so plain row puts the store mark on the right (start side).
   row-reverse had pushed it to the far left, away from the Urdu text. */
html[lang="ur"] #search-results [role="option"] > a{
  flex-direction:row;
}

/* v6n16 — tighter search panel, visible selection, clearer landing */
.shop-search #search-status{min-height:0;margin:8px 0}
.shop-search #search-hint{font-size:13px;margin:8px 0 0;opacity:.82;line-height:1.45}
.shop-search .search-heading{margin-bottom:12px}
.shop-search .search-heading [data-search-close]{
  background:transparent;
  color:var(--search-ink);
  border-color:color-mix(in srgb, var(--search-accent) 50%, transparent);
  min-height:40px;
  padding:8px 12px;
  font-weight:600;
}
.shop-search .search-panel{padding:16px 16px 20px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.shop-search li a{padding:10px 0}
.shop-search #search-results [role="option"].is-active a,
.shop-search #search-results [role="option"][aria-selected="true"] a{
  background:rgba(230,194,126,.14);
  border-radius:8px;
  padding-inline:10px;
  margin-inline:-10px;
  outline:1px solid rgba(230,194,126,.45);
}
@media (max-width:767px){
  .shop-search{max-height:94vh;max-height:94dvh}
}

/* Landed item: make it obviously the one you picked, without shouting. */
.items li.search-landed,
.items li:target.search-landed,
.items li.hit.search-landed{
  background:linear-gradient(90deg,rgba(230,194,126,.38),rgba(230,194,126,.08) 75%);
  box-shadow:inset 4px 0 0 #c9a36a;
  border-radius:10px;
  outline:1px solid rgba(201,163,106,.45);
  outline-offset:0;
}
.grp:has(.search-landed) .grp-head h2,
.grp:has(li:target) .grp-head h2{
  color:inherit;
}

/* v6n16d — 3-second search landing highlight, then fade */
.items li.search-landed,
.items li:target.search-landed,
.items li.hit.search-landed,
li.search-landed,
li.hit.search-landed{
  animation: ah-search-hl 3.4s ease forwards;
}
@keyframes ah-search-hl{
  0%, 88%{
    background:linear-gradient(90deg,rgba(230,194,126,.38),rgba(230,194,126,.08) 75%);
    box-shadow:inset 4px 0 0 #c9a36a;
    outline:1px solid rgba(201,163,106,.45);
    outline-offset:0;
  }
  100%{
    background:transparent;
    box-shadow:none;
    outline-color:transparent;
  }
}
@media (prefers-reduced-motion:reduce){
  .items li.search-landed,
  .items li:target.search-landed,
  .items li.hit.search-landed,
  li.search-landed,
  li.hit.search-landed{
    animation:none;
  }
}
/* After 3s, kill leftover :target / .hit gold (the hash may still be in the URL). */
.items li.search-land-done,
.items li.search-land-done:target,
.items li.search-land-done.hit,
li.search-land-done,
li.search-land-done:target{
  animation:none;
  background:none;
  box-shadow:none;
  outline:none;
}
.items li.search-land-done > .it .it-n b,
.items li.search-land-done:target > .it .it-n b,
.items li.search-land-done.hit > .it .it-n b{
  background:none;
  animation:none;
}


/* v6n16e — pin the phone search sheet to the top so the keyboard
   cannot cover the field. Desktop (768+) stays a centered dialog. */
@media (max-width: 767px){
  .shop-search{
    inset: 0 0 auto;
    top: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0 0 20px 20px;
    max-height: 94dvh;
    max-height: var(--search-vvh, 100dvh);
  }
  .shop-search .search-panel{
    padding-top: max(16px, env(safe-area-inset-top));
  }
  .shop-search[open]{
    animation: search-arrive-top 180ms cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes search-arrive-top{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
  .shop-search[open]{animation:none}
}