/* ============================================================================
   Uniq Gold Store — Search
   Header ka search overlay + search page ka chrome.
   Grid ke cards jaan bujh kar .ugs-cf ke hain (Collection Filter wala hi
   component), taake shop aur search page kabhi alag na lagen.
   ========================================================================== */

.ugs-srch {
  --ugs-srch-bg: #ffffff;
  --ugs-srch-ink: #1a1410;
  --ugs-srch-espresso: #2a0c00;
  --ugs-srch-line: #ede5da;
  --ugs-srch-sand: #d4c4b4;
  --ugs-srch-muted: #6b5b52;
  --ugs-srch-overlay: rgba(20, 8, 4, .5);

  --ugs-srch-pad-x: 40px;
  --ugs-srch-max: 720px;
  --ugs-srch-radius: 4px;
  --ugs-srch-input-h: 56px;
  --ugs-srch-z: 1300;
  --ugs-srch-page-bg: #fbf5ef;
  --ugs-srch-page-max: 1360px;
  --ugs-srch-page-pad-y: 64px;
  --ugs-srch-head-gap: 40px;

  --ugs-srch-serif: "Instrument Serif", "Times New Roman", Times, serif;
  --ugs-srch-sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.ugs-srch :where(*, *::before, *::after) { box-sizing: border-box; }
.ugs-srch :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; }
.ugs-srch :where(ul) { list-style: none; }
.ugs-srch :where(a) { color: inherit; text-decoration: none; }
.ugs-srch :where(img, svg) { display: block; max-width: 100%; }
.ugs-srch :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ============================================================================
   Overlay (header se khulta hai)
   ========================================================================== */

.ugs-srch-overlay {
  position: fixed;
  inset: 0;
  background: var(--ugs-srch-overlay, rgba(20, 8, 4, .5));
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: var(--ugs-srch-z, 1300);
}
.ugs-srch-overlay.is-open { opacity: 1; visibility: visible; }

.ugs-srch-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ugs-srch-bg, #fff);
  color: var(--ugs-srch-ink, #1a1410);
  z-index: calc(var(--ugs-srch-z, 1300) + 1);
  transform: translateY(-100%);
  transition: transform .32s ease;
  font-family: var(--ugs-srch-ff-spanel, var(--ugs-srch-sans, "Urbanist", sans-serif));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ugs-srch-panel.is-open { transform: translateY(0); }

.ugs-srch-panel :where(*, *::before, *::after) { box-sizing: border-box; }
.ugs-srch-panel :where(p, ul, li) { margin: 0; padding: 0; }
.ugs-srch-panel :where(ul) { list-style: none; }
.ugs-srch-panel :where(a) { color: inherit; text-decoration: none; }
.ugs-srch-panel :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ugs-srch-panel :where(img, svg) { display: block; max-width: 100%; }

.ugs-srch-panel__inner {
  width: 100%;
  max-width: var(--ugs-srch-max, 720px);
  margin-inline: auto;
  padding: 32px var(--ugs-srch-pad-x, 40px) 28px;
}

.ugs-srch-panel__top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ugs-srch__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ugs-srch-input-h, 56px);
  border-bottom: 1px solid var(--ugs-srch-line, #ede5da);
}

.ugs-srch__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--ugs-srch-muted, #6b5b52);
}
.ugs-srch__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5px; }

.ugs-srch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--ugs-srch-ff-sinput, var(--ugs-srch-sans, sans-serif));
  font-size: 20px;
  line-height: 1.3;
  color: var(--ugs-srch-ink, #1a1410);
  box-shadow: none !important;
  appearance: none;
}
.ugs-srch__input::placeholder { color: var(--ugs-srch-muted, #6b5b52); opacity: .7; }
.ugs-srch__input::-webkit-search-cancel-button { display: none; }

.ugs-srch__close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ugs-srch-ink, #1a1410);
}
.ugs-srch__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5px; }
.ugs-srch__close:focus-visible { outline: 2px solid var(--ugs-srch-ink, #1a1410); outline-offset: 2px; }

.ugs-srch-panel__body {
  overflow-y: auto;
  padding: 0 var(--ugs-srch-pad-x, 40px) 32px;
  width: 100%;
  max-width: var(--ugs-srch-max, 720px);
  margin-inline: auto;
}

/* ---------- results list ---------- */

.ugs-srch__list { display: flex; flex-direction: column; }

.ugs-srch__item + .ugs-srch__item { border-top: 1px solid var(--ugs-srch-line, #ede5da); }

.ugs-srch__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  transition: background-color .18s ease;
}
.ugs-srch__link:hover { background: rgba(42, 12, 0, .04); }
.ugs-srch__link:focus-visible { outline: 2px solid var(--ugs-srch-ink, #1a1410); outline-offset: -2px; }

.ugs-srch__thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  background: var(--ugs-srch-line, #ede5da);
  overflow: hidden;
}
.ugs-srch__thumb img { width: 100%; height: 100%; object-fit: cover; }

.ugs-srch__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.ugs-srch__name {
  font-family: var(--ugs-srch-ff-sname, var(--ugs-srch-serif, serif));
  font-size: 18px;
  line-height: 1.3;
  text-transform: capitalize;
  color: var(--ugs-srch-ink, #1a1410);
}

.ugs-srch__price {
  font-family: var(--ugs-srch-ff-sprice, var(--ugs-srch-sans, sans-serif));
  font-size: 14px;
  line-height: 1.3;
  color: var(--ugs-srch-muted, #6b5b52);
}
.ugs-srch__price del { opacity: .6; margin-right: 5px; text-decoration: line-through; }
.ugs-srch__price ins { text-decoration: none; }
.ugs-srch__price .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ---------- states ---------- */

.ugs-srch__hint,
.ugs-srch__empty {
  padding: 22px 4px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ugs-srch-muted, #6b5b52);
  font-family: var(--ugs-srch-ff-shint, inherit);
}

.ugs-srch__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid var(--ugs-srch-espresso, #2a0c00);
  border-radius: var(--ugs-srch-radius, 4px);
  font-size: 15px;
  color: var(--ugs-srch-espresso, #2a0c00);
  transition: background-color .2s ease, color .2s ease;
  font-family: var(--ugs-srch-ff-sall, inherit);
}
.ugs-srch__all:hover { background: var(--ugs-srch-espresso, #2a0c00); color: #fff; }

/* Spinner ke bajaye halka fade — koi @keyframes nahi */
.ugs-srch-panel__body.is-loading { opacity: .5; }
.ugs-srch-panel__body { transition: opacity .18s ease; }

/* ============================================================================
   Search page
   ========================================================================== */

.ugs-srch--page {
  box-sizing: border-box;
  width: 100%;
  padding: var(--ugs-srch-page-pad-y) var(--ugs-srch-pad-x);
  background: var(--ugs-srch-page-bg);
  font-family: var(--ugs-srch-ff-page, var(--ugs-srch-sans));
  color: var(--ugs-srch-ink);
}

.ugs-srch__head {
  max-width: var(--ugs-srch-page-max);
  margin: 0 auto var(--ugs-srch-head-gap);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ugs-srch__title {
  font-family: var(--ugs-srch-ff-title, var(--ugs-srch-serif));
  font-weight: 400;
  font-size: var(--ugs-srch-title-size, 40px);
  line-height: 1.25;
  color: var(--ugs-srch-ink);
}
.ugs-srch__title em { font-style: normal; opacity: .6; }

.ugs-srch__count {
  font-size: 14px;
  line-height: 22px;
  color: var(--ugs-srch-muted);
  font-family: var(--ugs-srch-ff-count, inherit);
}

.ugs-srch__page-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  height: var(--ugs-srch-input-h);
  padding: 0 16px;
  border: 1px solid var(--ugs-srch-line);
  border-radius: var(--ugs-srch-radius);
  background: #fff;
}

.ugs-srch__submit {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: var(--ugs-srch-radius);
  background: var(--ugs-srch-espresso);
  color: #fff;
  font-size: 14px;
  transition: opacity .2s ease;
  font-family: var(--ugs-srch-ff-submit, inherit);
}
.ugs-srch__submit:hover { opacity: .9; }

.ugs-srch__results { max-width: var(--ugs-srch-page-max, 1360px); margin-inline: auto; }

.ugs-srch__none {
  max-width: var(--ugs-srch-page-max);
  margin-inline: auto;
  padding: 60px 0;
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--ugs-srch-muted);
  font-family: var(--ugs-srch-ff-none, inherit);
}

.ugs-srch__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.ugs-srch__chip {
  padding: 8px 16px;
  border: 1px solid var(--ugs-srch-sand);
  border-radius: var(--ugs-srch-radius);
  font-size: 14px;
  color: var(--ugs-srch-ink);
  transition: background-color .18s ease, color .18s ease;
  font-family: var(--ugs-srch-ff-chip, inherit);
}
.ugs-srch__chip:hover { background: var(--ugs-srch-espresso); border-color: var(--ugs-srch-espresso); color: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .ugs-srch { --ugs-srch-pad-x: 20px; --ugs-srch-input-h: 48px; }
  .ugs-srch__input { font-size: 17px; }
  .ugs-srch__name { font-size: 16px; }
  .ugs-srch__thumb { width: 56px; height: 56px; }
  .ugs-srch { --ugs-srch-page-pad-y: 40px; --ugs-srch-title-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ugs-srch-overlay,
  .ugs-srch-panel,
  .ugs-srch * { transition-duration: .01ms !important; }
}

/* ============================================================================
   THEME COLOUR GUARD
   Panel body ke bahar rehta hai, is liye har var() me fallback zaroori hai.
   ========================================================================== */

.ugs-srch button,
.ugs-srch-panel button {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}
.ugs-srch a,
.ugs-srch-panel a { color: inherit !important; text-decoration: none !important; }

.ugs-srch-panel { background-color: var(--ugs-srch-bg, #fff) !important; }
.ugs-srch-panel .ugs-srch__name { color: var(--ugs-srch-ink, #1a1410) !important; }
.ugs-srch-panel .ugs-srch__price,
.ugs-srch-panel .ugs-srch__hint,
.ugs-srch-panel .ugs-srch__empty { color: var(--ugs-srch-muted, #6b5b52) !important; }
.ugs-srch-panel .ugs-srch__input {
  background-color: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
  color: var(--ugs-srch-ink, #1a1410) !important;
}
.ugs-srch-panel .ugs-srch__close,
.ugs-srch-panel .ugs-srch__icon { color: var(--ugs-srch-ink, #1a1410) !important; }
.ugs-srch-panel .ugs-srch__close svg,
.ugs-srch-panel .ugs-srch__icon svg,
.ugs-srch .ugs-srch__icon svg {
  fill: none !important;
  stroke: currentColor !important;
  visibility: visible !important;
}
.ugs-srch-panel .ugs-srch__all {
  border: 1px solid var(--ugs-srch-espresso, #2a0c00) !important;
  border-radius: var(--ugs-srch-radius, 4px) !important;
  color: var(--ugs-srch-espresso, #2a0c00) !important;
}
.ugs-srch-panel .ugs-srch__all:hover {
  background-color: var(--ugs-srch-espresso, #2a0c00) !important;
  color: #fff !important;
}

.ugs-srch .ugs-srch__title,
.ugs-srch .ugs-srch__chip { color: var(--ugs-srch-ink) !important; }
.ugs-srch .ugs-srch__count,
.ugs-srch .ugs-srch__none { color: var(--ugs-srch-muted) !important; }
.ugs-srch .ugs-srch__submit {
  background-color: var(--ugs-srch-espresso) !important;
  color: #fff !important;
  border-radius: var(--ugs-srch-radius) !important;
}
.ugs-srch .ugs-srch__chip {
  border: 1px solid var(--ugs-srch-sand) !important;
  border-radius: var(--ugs-srch-radius) !important;
}
.ugs-srch .ugs-srch__chip:hover {
  background-color: var(--ugs-srch-espresso) !important;
  color: #fff !important;
}
.ugs-srch .ugs-srch__page-form {
  border: 1px solid var(--ugs-srch-line) !important;
  border-radius: var(--ugs-srch-radius) !important;
  background-color: #fff !important;
}
.ugs-srch .ugs-srch__page-form input {
  background-color: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
  color: var(--ugs-srch-ink) !important;
}