/* ============================================================
   RENUCE — SEARCH OVERLAY (search-overlay.css)
   Full-width panel that drops from the header on search open.
   Covers: backdrop, panel, input, clear/close controls,
           live results list, result items, no-results state,
           default (trending + categories), responsive.
   Load order: AFTER components.css
   ============================================================ */


/* =====================================================
   1. OVERLAY SHELL
   Fixed, full-screen container — invisible until open
===================================================== */

.search-overlay {
  position:       fixed;
  inset:          0;
  z-index:        var(--z-overlay);
  pointer-events: none;
  visibility:     hidden;
}

.search-overlay[aria-hidden="false"] {
  pointer-events: auto;
  visibility:     visible;
}


/* =====================================================
   2. BACKDROP
   Covers the page below the panel
===================================================== */

.search-overlay__backdrop {
  position:   absolute;
  inset:      0;
  background: var(--color-bg-modal);
  opacity:    0;
  transition: opacity var(--duration-slow) var(--ease-out);
  cursor:     pointer;
}

.search-overlay[aria-hidden="false"] .search-overlay__backdrop {
  opacity: 1;
}


/* =====================================================
   3. PANEL
   Slides down from the top of the viewport.
   Sits below the announcement bar + header.
===================================================== */

.search-overlay__panel {
  position:        absolute;
  top:             0;
  left:            0;
  right:           0;
  background:      var(--search-overlay-bg);
  box-shadow:      0 8px 32px rgba(0, 0, 0, 0.12),
                   0 1px 0   rgba(0, 0, 0, 0.06);
  transform:       translateY(-100%);
  transition:      transform var(--duration-slow) var(--ease-out);
  will-change:     transform;
  max-height:      90vh;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}

.search-overlay[aria-hidden="false"] .search-overlay__panel {
  transform: translateY(0);
}


/* =====================================================
   4. HEADER — input row + close button
===================================================== */

.search-overlay__header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink:   0;
  position:      relative;
}

/* Thin gold accent line at the very top of the panel */
.search-overlay__header::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(
                90deg,
                transparent 0%,
                var(--color-brand-gold) 40%,
                var(--color-brand-gold) 60%,
                transparent 100%
              );
  opacity:    0.70;
}


/* =====================================================
   5. INPUT WRAP
===================================================== */

.search-overlay__input-wrap {
  position:    relative;
  flex:        1;
  display:     flex;
  align-items: center;
}

/* Search magnifier icon */
.search-overlay__icon {
  position:       absolute;
  left:           var(--space-4);
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--color-text-muted);
  flex-shrink:    0;
  pointer-events: none;
  transition:     color var(--duration-base) var(--ease-in-out);
  z-index:        1;
}

.search-overlay__input:focus ~ .search-overlay__icon,
.search-overlay__input-wrap:focus-within .search-overlay__icon {
  color: var(--color-brand-gold);
}

/* Search input */
.search-overlay__input {
  width:           100%;
  padding:         var(--space-3-5) var(--space-10) var(--space-3-5) var(--space-11);
  font-family:     var(--font-sans);
  font-size:       var(--text-lg);
  font-weight:     var(--weight-regular);
  color:           var(--color-text-primary);
  background:      var(--search-input-bg);
  border:          1.5px solid transparent;
  border-radius:   var(--radius-lg);
  outline:         none;
  -webkit-appearance: none;
  appearance:      none;
  transition:      background     var(--duration-base) var(--ease-in-out),
                   border-color   var(--duration-base) var(--ease-in-out),
                   box-shadow     var(--duration-base) var(--ease-in-out);
  line-height:     var(--leading-normal);
}

.search-overlay__input::placeholder {
  color:   var(--color-text-muted);
  opacity: 1;
}

/* Remove native clear button on WebKit */
.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance:         none;
}

.search-overlay__input:focus {
  background:   var(--color-bg-primary);
  border-color: var(--color-brand-gold);
  box-shadow:   0 0 0 3px rgba(201, 169, 110, 0.15);
}

/* Clear button — shown when input has value */
.search-overlay__clear {
  position:        absolute;
  right:           var(--space-3);
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  background:      var(--color-gray-200);
  border:          none;
  border-radius:   var(--radius-full);
  color:           var(--color-text-muted);
  cursor:          pointer;
  transition:      background var(--duration-fast) var(--ease-in-out),
                   color      var(--duration-fast) var(--ease-in-out),
                   transform  var(--duration-fast) var(--ease-bounce);
  flex-shrink:     0;
}

.search-overlay__clear:hover {
  background: var(--color-brand-black);
  color:      var(--color-brand-white);
  transform:  translateY(-50%) scale(1.10);
}

.search-overlay__clear:focus-visible {
  outline:        2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Hidden state via [hidden] attribute */
.search-overlay__clear[hidden] {
  display: none;
}


/* =====================================================
   6. CLOSE BUTTON + ESC HINT
===================================================== */

.search-overlay__close {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-muted);
  background:      transparent;
  border:          1.5px solid var(--color-border);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      color        var(--duration-fast) var(--ease-in-out),
                   background   var(--duration-fast) var(--ease-in-out),
                   border-color var(--duration-fast) var(--ease-in-out);
}

.search-overlay__close:hover {
  color:        var(--color-text-primary);
  background:   var(--color-gray-100);
  border-color: var(--color-border-medium);
}

.search-overlay__close:focus-visible {
  outline:        2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ESC keyboard hint badge */
.search-overlay__esc {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  padding:        2px var(--space-1-5);
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    var(--weight-regular);
  color:          var(--color-text-muted);
  background:     var(--color-gray-100);
  border:         1px solid var(--color-border-medium);
  border-radius:  var(--radius-sm);
  line-height:    1.4;
  letter-spacing: 0;
  pointer-events: none;
}

/* Hide ESC hint text label on small screens */
@media (max-width: 480px) {
  .search-overlay__close span:not(.search-overlay__esc) {
    display: none;
  }

  .search-overlay__close {
    padding:       var(--space-2);
    border-radius: var(--radius-full);
    gap:           0;
  }

  .search-overlay__esc {
    display: none;
  }
}


/* =====================================================
   7. BODY — scrollable content area
===================================================== */

.search-overlay__body {
  flex:               1;
  overflow-y:         auto;
  overflow-x:         hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.search-overlay__body::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.search-overlay__body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.search-overlay__body::-webkit-scrollbar-thumb {
  background:    var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

.search-overlay__body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}


/* =====================================================
   8. DEFAULT STATE — trending + categories
   Shown when input is empty
===================================================== */

.search-overlay__default {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       0;
  padding:   var(--space-8) var(--space-6) var(--space-10);
  max-width: var(--container-max);
  margin:    0 auto;
  animation: fade-in var(--duration-base) var(--ease-out);
}

/* Divider between the two columns */
.search-overlay__default > * + * {
  border-left: 1px solid var(--color-border-light);
  padding-left: var(--space-8);
}

.search-overlay__default > *:first-child {
  padding-right: var(--space-8);
}

/* Section heading */
.search-overlay__section-title {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
  margin:         0 0 var(--space-4);
}


/* =====================================================
   9. TRENDING SEARCHES
===================================================== */

.search-overlay__trending {
  /* column layout via parent grid */
}

.search-overlay__tags {
  display:  flex;
  flex-wrap: wrap;
  gap:      var(--space-2);
}

/* .search-tag styles live in components.css (section 17) */
/* Slight size override for overlay context */
.search-overlay__tags .search-tag {
  font-size: var(--text-xs);
}


/* =====================================================
   10. BROWSE CATEGORIES
===================================================== */

.search-overlay__categories {
  /* column layout via parent grid */
}

.search-overlay__cat-links {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* .search-cat-link styles live in components.css (section 17) */
/* Subtle left indicator line on hover */
.search-overlay__cat-links .search-cat-link {
  border-left:     2px solid transparent;
  border-radius:   0 var(--radius-md) var(--radius-md) 0;
  padding-left:    var(--space-4);
  transition:      background    var(--duration-fast) var(--ease-in-out),
                   color         var(--duration-fast) var(--ease-in-out),
                   border-color  var(--duration-fast) var(--ease-in-out);
}

.search-overlay__cat-links .search-cat-link:hover {
  border-left-color: var(--color-brand-gold);
  background:        var(--color-bg-secondary);
  color:             var(--color-text-primary);
}


/* =====================================================
   11. LIVE RESULTS CONTAINER
   Populated by search JS — hidden when empty
===================================================== */

.search-overlay__results {
  padding:   var(--space-2) 0 var(--space-4);
  max-width: var(--container-max);
  margin:    0 auto;
}

.search-overlay__results:empty {
  display: none;
}


/* =====================================================
   12. RESULTS META ROW
   "Showing X results for 'query'" + View All link
   Added dynamically by JS
===================================================== */

.search-results-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-5) var(--space-6) var(--space-3);
  border-bottom:   1px solid var(--color-border-light);
}

.search-results-meta__label {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-normal);
}

.search-results-meta__label strong {
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
}

.search-results-meta__link {
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  color:           var(--color-brand-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-brand-gold);
  white-space:     nowrap;
  transition:      color var(--duration-fast) var(--ease-in-out);
  flex-shrink:     0;
}

.search-results-meta__link:hover {
  color: var(--color-brand-gold);
}


/* =====================================================
   13. SEARCH RESULT ITEMS
   List of matching products — displayed as rows
===================================================== */

.search-result-item {
  display:         flex;
  align-items:     center;
  gap:             var(--space-4);
  padding:         var(--space-3) var(--space-6);
  text-decoration: none;
  background:      transparent;
  border:          none;
  width:           100%;
  cursor:          pointer;
  transition:      background var(--duration-fast) var(--ease-in-out);
  border-bottom:   1px solid var(--color-border-light);
  outline:         none;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item:focus-visible,
.search-result-item[aria-selected="true"] {
  background: var(--color-bg-secondary);
}

.search-result-item:focus-visible {
  box-shadow: inset 2px 0 0 var(--color-brand-gold);
}

/* Entrance animation when results load */
.search-result-item {
  animation: result-in var(--duration-base) var(--ease-out) both;
}

.search-result-item:nth-child(1)  { animation-delay: 0ms;  }
.search-result-item:nth-child(2)  { animation-delay: 30ms; }
.search-result-item:nth-child(3)  { animation-delay: 60ms; }
.search-result-item:nth-child(4)  { animation-delay: 90ms; }
.search-result-item:nth-child(5)  { animation-delay: 120ms; }
.search-result-item:nth-child(n+6) { animation-delay: 150ms; }

@keyframes result-in {
  from {
    opacity:   0;
    transform: translateY(-4px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* --- Thumbnail --- */
.search-result-item__img-wrap {
  flex-shrink:   0;
  width:         56px;
  height:        70px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--color-bg-tertiary);
  border:        1px solid var(--color-border-light);
}

.search-result-item__img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  object-position: center top;
  display:      block;
  transition:   transform var(--duration-slow) var(--ease-out);
}

.search-result-item:hover .search-result-item__img {
  transform: scale(1.06);
}

/* --- Text info --- */
.search-result-item__info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.search-result-item__category {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-brand-gold);
  line-height:    1;
}

.search-result-item__name {
  font-family:   var(--font-serif);
  font-size:     var(--text-base);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-primary);
  line-height:   var(--leading-snug);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Highlight matched query text */
.search-result-item__name mark,
.search-result-item__name .search-highlight {
  background:    rgba(201, 169, 110, 0.20);
  color:         var(--color-brand-black);
  font-weight:   var(--weight-semibold);
  border-radius: 2px;
  padding:       0 1px;
}

.search-result-item__variant {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  line-height: var(--leading-normal);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Price --- */
.search-result-item__price-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-0-5);
  flex-shrink:    0;
}

.search-result-item__price {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  font-weight:  var(--weight-semibold);
  color:        var(--color-text-primary);
  white-space:  nowrap;
}

.search-result-item__price--sale {
  color: var(--color-error);
}

.search-result-item__original {
  font-size:       var(--text-xs);
  color:           var(--color-text-muted);
  text-decoration: line-through;
  white-space:     nowrap;
}

/* Arrow icon at far right */
.search-result-item__arrow {
  flex-shrink: 0;
  color:       var(--color-text-muted);
  opacity:     0;
  transition:  opacity    var(--duration-fast) var(--ease-in-out),
               color      var(--duration-fast) var(--ease-in-out),
               transform  var(--duration-fast) var(--ease-out);
  margin-left: var(--space-2);
}

.search-result-item:hover .search-result-item__arrow,
.search-result-item[aria-selected="true"] .search-result-item__arrow {
  opacity:   1;
  color:     var(--color-brand-gold);
  transform: translateX(2px);
}

/* Sold-out badge on result */
.search-result-item__sold-out {
  display:        inline-flex;
  align-items:    center;
  padding:        1px var(--space-1-5);
  font-size:      10px;
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  background:     var(--color-gray-100);
  border-radius:  var(--radius-badge);
  white-space:    nowrap;
}


/* =====================================================
   14. CATEGORY RESULT ROWS
   When a search term matches a category name,
   rendered differently — full-width with an icon
===================================================== */

.search-result-item--category {
  gap:        var(--space-3);
  padding:    var(--space-3) var(--space-6);
  background: var(--color-bg-secondary);
  border-left: 2px solid transparent;
}

.search-result-item--category:hover,
.search-result-item--category[aria-selected="true"] {
  background:  var(--color-bg-tertiary);
  border-left-color: var(--color-brand-gold);
}

.search-result-item--category .search-result-item__cat-icon {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      rgba(201, 169, 110, 0.10);
  border-radius:   var(--radius-md);
  color:           var(--color-brand-gold);
}

.search-result-item--category .search-result-item__name {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
}

.search-result-item--category .search-result-item__count {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  margin-top: var(--space-0-5);
  display:    block;
}


/* =====================================================
   15. LOADING STATE
   Skeleton rows while search results are fetching
===================================================== */

.search-overlay__loading {
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap:     var(--space-3);
}

.search-result-skeleton {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  padding:     var(--space-2) 0;
  animation:   fade-in var(--duration-base) var(--ease-out) both;
}

.search-result-skeleton:nth-child(1) { animation-delay: 0ms;  }
.search-result-skeleton:nth-child(2) { animation-delay: 40ms; }
.search-result-skeleton:nth-child(3) { animation-delay: 80ms; }

.search-result-skeleton__img {
  flex-shrink:   0;
  width:         56px;
  height:        70px;
  border-radius: var(--radius-md);
  background:    linear-gradient(
                   90deg,
                   var(--skeleton-bg)    25%,
                   var(--skeleton-shine) 50%,
                   var(--skeleton-bg)    75%
                 );
  background-size: 200% 100%;
  animation:    skeleton-shimmer 1.5s infinite linear;
}

.search-result-skeleton__info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.search-result-skeleton__line {
  height:        10px;
  border-radius: var(--radius-sm);
  background:    linear-gradient(
                   90deg,
                   var(--skeleton-bg)    25%,
                   var(--skeleton-shine) 50%,
                   var(--skeleton-bg)    75%
                 );
  background-size: 200% 100%;
  animation:    skeleton-shimmer 1.5s infinite linear;
}

.search-result-skeleton__line--sm {
  width: 55%;
  animation-delay: 0.1s;
}

.search-result-skeleton__line--xs {
  width: 35%;
  animation-delay: 0.2s;
}


/* =====================================================
   16. NO RESULTS STATE
===================================================== */

.search-overlay__no-results {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         var(--space-12) var(--space-8);
  gap:             var(--space-3);
  animation:       fade-in var(--duration-base) var(--ease-out);
}

.search-overlay__no-results-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  border-radius:   var(--radius-full);
  background:      var(--color-bg-secondary);
  color:           var(--color-text-muted);
  margin-bottom:   var(--space-2);
  flex-shrink:     0;
}

.search-overlay__no-results-title {
  font-family:  var(--font-serif);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-medium);
  color:        var(--color-text-primary);
  margin:       0;
}

.search-overlay__no-results-text {
  font-size:    var(--text-sm);
  color:        var(--color-text-muted);
  max-width:    280px;
  line-height:  var(--leading-relaxed);
}

.search-overlay__no-results-text strong {
  color:       var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

/* Suggestion tags below no-results message */
.search-overlay__no-results-suggestions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
}


/* =====================================================
   17. VIEW ALL RESULTS ROW
   Sticky at the bottom of results, always visible
===================================================== */

.search-overlay__view-all {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-4) var(--space-6);
  border-top:      1px solid var(--color-border-light);
  background:      var(--color-bg-primary);
}

.search-overlay__view-all-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  letter-spacing:  var(--tracking-wide);
  color:           var(--color-brand-black);
  text-decoration: none;
  padding:         var(--space-2-5) var(--space-5);
  border:          1.5px solid var(--color-brand-black);
  border-radius:   var(--radius-btn);
  transition:      background    var(--duration-base) var(--ease-in-out),
                   color         var(--duration-base) var(--ease-in-out),
                   border-color  var(--duration-base) var(--ease-in-out),
                   box-shadow    var(--duration-base) var(--ease-in-out);
  white-space:     nowrap;
}

.search-overlay__view-all-link:hover {
  background:   var(--color-brand-black);
  color:        var(--color-brand-white);
  border-color: var(--color-brand-black);
  box-shadow:   var(--shadow-md);
}

.search-overlay__view-all-link:hover svg {
  transform: translateX(3px);
}

.search-overlay__view-all-link svg {
  flex-shrink: 0;
  transition:  transform var(--duration-base) var(--ease-out);
}

.search-overlay__view-all-link:focus-visible {
  outline:        2px solid var(--focus-ring-color);
  outline-offset: 2px;
}


/* =====================================================
   18. RECENT SEARCHES
   Shown above trending when user has history
===================================================== */

.search-overlay__recent {
  padding:       var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.search-overlay__recent-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  margin-bottom:   var(--space-3);
}

.search-overlay__recent-header .search-overlay__section-title {
  margin: 0;
}

.search-overlay__clear-history {
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-muted);
  background:      none;
  border:          none;
  cursor:          pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding:         0;
  transition:      color var(--duration-fast) var(--ease-in-out);
  white-space:     nowrap;
}

.search-overlay__clear-history:hover {
  color: var(--color-error);
}

.search-overlay__recent-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.search-recent-item {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-2) var(--space-2);
  border-radius:   var(--radius-md);
  text-decoration: none;
  color:           var(--color-text-secondary);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-regular);
  transition:      background var(--duration-fast) var(--ease-in-out),
                   color      var(--duration-fast) var(--ease-in-out);
  cursor:          pointer;
}

.search-recent-item:hover {
  background: var(--color-gray-50);
  color:      var(--color-text-primary);
}

.search-recent-item__icon {
  flex-shrink: 0;
  color:       var(--color-text-muted);
}

.search-recent-item__text {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.search-recent-item__remove {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  padding:     var(--space-1);
  color:       var(--color-text-muted);
  opacity:     0;
  border:      none;
  background:  none;
  cursor:      pointer;
  border-radius: var(--radius-full);
  transition:  opacity     var(--duration-fast) var(--ease-in-out),
               color       var(--duration-fast) var(--ease-in-out),
               background  var(--duration-fast) var(--ease-in-out);
}

.search-recent-item:hover .search-recent-item__remove {
  opacity: 1;
}

.search-recent-item__remove:hover {
  color:      var(--color-error);
  background: var(--color-error-light);
}


/* =====================================================
   19. BODY SCROLL LOCK
===================================================== */

body.search-open {
  overflow: hidden;
}


/* =====================================================
   20. RESPONSIVE OVERRIDES
===================================================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {

  .search-overlay__header {
    padding: var(--space-4) var(--space-5);
  }

  .search-overlay__default {
    padding: var(--space-6) var(--space-5) var(--space-8);
    gap:     0;
  }

  .search-overlay__default > *:first-child {
    padding-right: var(--space-6);
  }

  .search-overlay__default > * + * {
    padding-left: var(--space-6);
  }

  .search-result-item {
    padding: var(--space-3) var(--space-5);
  }

  .search-results-meta {
    padding: var(--space-4) var(--space-5) var(--space-3);
  }

  .search-overlay__view-all {
    padding: var(--space-4) var(--space-5);
  }

}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {

  .search-overlay__panel {
    max-height: 95vh;
  }

  .search-overlay__header {
    padding: var(--space-3) var(--space-4);
    gap:     var(--space-2);
  }

  .search-overlay__input {
    font-size: var(--text-base);
    padding:   var(--space-3) var(--space-9) var(--space-3) var(--space-10);
  }

  /* Stack columns vertically on mobile */
  .search-overlay__default {
    grid-template-columns: 1fr;
    padding:               var(--space-6) var(--space-4) var(--space-8);
    gap:                   var(--space-6);
  }

  .search-overlay__default > *:first-child {
    padding-right: 0;
    padding-bottom: var(--space-6);
    border-bottom:  1px solid var(--color-border-light);
  }

  .search-overlay__default > * + * {
    border-left:  none;
    padding-left: 0;
  }

  .search-result-item {
    padding: var(--space-3) var(--space-4);
    gap:     var(--space-3);
  }

  .search-result-item__img-wrap {
    width:  50px;
    height: 62px;
  }

  .search-result-item__arrow {
    display: none;
  }

  .search-results-meta {
    padding: var(--space-3) var(--space-4) var(--space-2);
  }

  .search-overlay__view-all {
    padding: var(--space-3) var(--space-4);
  }

  .search-overlay__no-results {
    padding: var(--space-8) var(--space-5);
  }

  .search-overlay__recent {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  .search-overlay__loading {
    padding: var(--space-3) var(--space-4);
  }

}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {

  .search-overlay__input {
    font-size: var(--text-base);
  }

  .search-overlay__section-title {
    font-size: 10px;
  }

  .search-overlay__tags {
    gap: var(--space-1-5);
  }

  .search-result-item__category {
    display: none;   /* Save vertical space on tiny screens */
  }

  .search-overlay__no-results-icon {
    width:  52px;
    height: 52px;
  }

  .search-overlay__no-results-title {
    font-size: var(--text-lg);
  }

}