/* =====================================================================
   AESTH — search.css
   Live search dropdown (header, mobile sheet, search page) + search page.
   ===================================================================== */

/* ---------- Header search grows a little while in use (desktop) ---------- */
@media (min-width: 1024px) {
  .header-search { transition: width .3s var(--ease); }
  .header-search:focus-within { width: min(400px, 100%); }
}
.header-search.is-open input { border-color: var(--rose-600); background: var(--white); }
body.is-search-open { overflow: hidden; }
body.is-search-open::before {             /* dim the page behind the mobile search sheet */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(42, 32, 35, .4);
  animation: sp-fade .2s ease;
}
@keyframes sp-fade { from { opacity: 0; } }

/* ---------- Dropdown panel ---------- */
.search-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 120;
  width: min(480px, calc(100vw - 2 * var(--gutter)));
  max-height: min(var(--sp-room, 74vh), 74vh, 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 28px 60px -28px rgba(42, 32, 35, .42), 0 2px 8px rgba(42, 32, 35, .05);
  text-align: left;
  animation: sp-in .18s var(--ease);
  scrollbar-width: thin;
}
@keyframes sp-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .search-pop { animation: none; } }

/* Mobile sheet: full width under the search field, fills the screen */
.search-pop--sheet {
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  max-height: var(--sp-room, calc(100dvh - 72px - env(safe-area-inset-top, 0px)));
  padding: .25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 30px 50px -30px rgba(42, 32, 35, .45);
}

/* ---------- Sections ---------- */
.sp-sec { padding: .6rem .45rem .3rem; }
.sp-sec + .sp-sec { margin-top: .2rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.sp-sec--tight { padding-top: .3rem; }
.sp-sec--tight + .sp-sec--tight { border-top: 0; padding-top: .2rem; margin-top: 0; }
.sp-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-label {
  margin-bottom: .55rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sp-clear { margin-bottom: .55rem; font-size: var(--fs-xs); font-weight: 700; color: var(--rose-700); text-decoration: underline; text-underline-offset: 3px; }

/* Chips (recent / popular) */
.sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color .15s, background-color .15s;
}
.sp-chip .icon { width: 14px; height: 14px; color: var(--ink-soft); }
.sp-chip--hot .icon { color: var(--rose-600); }
.sp-chip:hover, .sp-chip.is-active { border-color: var(--blush-400); background: var(--blush-100); }

/* Category tiles */
.sp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.sp-cats--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sp-cat { display: flex; align-items: center; gap: .65rem; padding: .4rem; border-radius: var(--r-sm); transition: background-color .15s; }
.sp-cat img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blush-100); }
.sp-cat strong { display: block; font-size: var(--fs-sm); line-height: 1.25; }
.sp-cat small { font-size: var(--fs-xs); color: var(--ink-soft); }
.sp-cat:hover, .sp-cat.is-active { background: var(--paper); }

/* Product rows */
.sp-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sp-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .45rem;
  border-radius: var(--r-sm);
  transition: background-color .15s;
}
.sp-item:hover, .sp-item.is-active { background: var(--blush-100); }
.sp-item__img { width: 56px; height: 70px; overflow: hidden; border-radius: 10px; background: var(--blush-100); }
.sp-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.sp-item:hover .sp-item__img img, .sp-item.is-active .sp-item__img img { transform: scale(1.06); }
.sp-item.is-out .sp-item__img img { opacity: .55; filter: grayscale(.35); }
.sp-item__body { min-width: 0; }
.sp-item__cat {
  display: block;
  margin-bottom: .1rem;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rose-700);
}
.sp-item__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.sp-item__name mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rose-600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.sp-item__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.sp-tag {
  padding: .05rem .45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sp-tag--off { background: var(--rose-700); border-color: var(--rose-700); color: #fff; }
.sp-tag--badge { background: var(--sage-200); border-color: var(--sage-200); color: var(--sage-700); }
.sp-tag--low { background: #FFF4E5; border-color: #F5D9A8; color: #7A4B00; }
.sp-tag--out { background: #F3EEEE; color: var(--ink-soft); }
.sp-item__price { display: grid; justify-items: end; line-height: 1.2; text-align: right; white-space: nowrap; }
.sp-item__price small { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.sp-item__price strong { font-size: var(--fs-sm); font-weight: 800; }
.sp-item__price s { margin-top: .1rem; font-size: var(--fs-xs); color: var(--ink-soft); text-decoration-color: var(--blush-400); text-decoration-thickness: 1.5px; }

/* See all + request */
.sp-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: .45rem .25rem 0;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background-color .15s;
}
.sp-all span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-all .icon { flex: none; width: 18px; height: 18px; }
.sp-all:hover, .sp-all.is-active { background: var(--rose-700); }
.sp-request { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .4rem; padding: .55rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.sp-request .icon { width: 16px; height: 16px; color: #1F8F55; }
.sp-request strong { color: #1F8F55; }
.sp-request:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* "Showing results for …" */
.sp-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .25rem .25rem .35rem;
  padding: .55rem .8rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.sp-note .icon { flex: none; width: 16px; height: 16px; margin-top: .15rem; color: var(--rose-600); }
.sp-note strong { color: var(--ink); }

/* Nothing found */
.sp-empty {
  display: grid;
  justify-items: center;
  gap: .4rem;
  margin: .25rem;
  padding: 1.4rem 1rem 1.2rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--blush-100), var(--paper));
  text-align: center;
}
.sp-empty__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1F8F55;
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(31, 143, 85, .7);
}
.sp-empty__icon .icon { width: 26px; height: 26px; }
.sp-empty__title { margin-top: .35rem; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); overflow-wrap: anywhere; }
.sp-empty__text { max-width: 34ch; font-size: var(--fs-sm); color: var(--ink-soft); }
.sp-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .55rem; }
.sp-empty__actions .btn { min-height: 44px; }
.sp-empty__actions .btn.is-active { outline: 2.5px solid var(--rose-700); outline-offset: 2px; }

/* Loading */
.sp-loading { display: grid; gap: .55rem; padding: .5rem; }
.sp-skel { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: .85rem; }
.sp-skel > span:first-child { height: 70px; border-radius: 10px; }
.sp-skel > span:last-child { display: grid; gap: .45rem; }
.sp-skel i { display: block; height: 12px; border-radius: 6px; }
.sp-skel i:last-child { width: 55%; }
.sp-skel > span:first-child, .sp-skel i {
  background: linear-gradient(90deg, var(--blush-100) 25%, var(--paper) 50%, var(--blush-100) 75%);
  background-size: 200% 100%;
  animation: sp-shimmer 1.1s linear infinite;
}
@keyframes sp-shimmer { to { background-position: -200% 0; } }

/* Very small phones: price drops under the name */
@media (max-width: 359px) {
  .sp-item { grid-template-columns: 48px minmax(0, 1fr); }
  .sp-item__img { width: 48px; height: 60px; }
  .sp-item__price { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: .4rem; align-items: baseline; }
  .sp-cats { grid-template-columns: 1fr; }
}

/* =====================================================================
   Search page
   ===================================================================== */
.search-hero { position: relative; max-width: 640px; margin-top: var(--space-5); }
.search-hero__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .35rem .35rem 1.1rem;
  border: 1.5px solid var(--blush-300);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 14px 34px -22px rgba(160, 79, 94, .55);
  transition: border-color .2s, box-shadow .2s;
}
.search-hero__field:focus-within { border-color: var(--rose-600); box-shadow: 0 0 0 4px var(--blush-200); }
.search-hero__icon { flex: none; width: 20px; height: 20px; color: var(--ink-soft); }
.search-hero input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font-size: var(--fs-base); }
.search-hero input:focus { outline: none; }
.search-hero input::-webkit-search-cancel-button { cursor: pointer; }
.search-hero .btn { min-height: 46px; }
.search-hero .search-pop { width: 100%; }
@media (max-width: 520px) { .search-hero .btn { padding-inline: 1.1rem; } }

.search-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.search-note .icon { flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--rose-600); }
.search-note strong { color: var(--ink); }

/* Nothing found */
.search-empty { padding-bottom: var(--space-4); }
.search-empty__card {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1.5px dashed var(--blush-300);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 15% 20%, rgba(246, 225, 223, .9), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(227, 231, 219, .9), transparent 45%),
    var(--paper);
  text-align: center;
}
.search-empty__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #1F8F55;
  color: #fff;
  box-shadow: 0 18px 36px -16px rgba(31, 143, 85, .7);
}
.search-empty__icon .icon { width: 36px; height: 36px; }
.search-empty__script { margin-top: var(--space-2); font-family: var(--font-script); font-size: 2.6rem; line-height: 1; color: var(--rose-600); }
.search-empty__card h2 { max-width: 22ch; font-size: var(--fs-xl); }
.search-empty__card p { max-width: 48ch; color: var(--ink-soft); }
.search-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.search-empty__label { margin-top: var(--space-6); font-size: var(--fs-sm); font-weight: 800; text-align: center; }
.search-empty__chips { justify-content: center; margin-top: var(--space-3); }
.search-empty__more { margin: var(--space-7) 0 var(--space-4); font-size: var(--fs-lg); }

/* Under the results */
.search-request {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1.5px dashed var(--blush-300);
  border-radius: var(--r-md);
  background: var(--paper);
}
.search-request__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #1F8F55; color: #fff; }
.search-request__icon .icon { width: 24px; height: 24px; }
.search-request > div { display: grid; flex: 1; gap: .15rem; }
.search-request strong { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; }
.search-request span { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 640px) {
  .search-request { flex-direction: column; text-align: center; }
  .search-request .btn { width: 100%; }
}

.search-hero .search-pop { z-index: 130; }

/* While the shopper is still typing (1–2 letters, nothing yet) */
.sp-typing { display: flex; align-items: center; gap: .5rem; margin: .35rem .5rem .1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.sp-typing .icon { width: 16px; height: 16px; color: var(--rose-600); }

/* Hide the floating WhatsApp bubble while a search list is open (it would cover results) */
body.is-search-open .wa-float,
body:has(form[data-search].is-open) .wa-float { opacity: 0; pointer-events: none; }