/* ─── WC Smart Search — Autocomplete Styles ─────────────────────────────────
   Neutral, themeable. Override variables in your child theme's style.css.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --wcss-bg:           #ffffff;
  --wcss-border:       #e2e8f0;
  --wcss-shadow:       0 8px 24px rgba(0,0,0,.10);
  --wcss-radius:       8px;
  --wcss-hover-bg:     #f7fafc;
  --wcss-active-bg:    #ebf4ff;
  --wcss-text-primary: #1a202c;
  --wcss-text-muted:   #718096;
  --wcss-accent:       #3b82f6;
  --wcss-nostock-color:#e53e3e;
  --wcss-mark-bg:      #fef08a;
  --wcss-mark-color:   #1a202c;
  --wcss-thumb-size:   48px;
  --wcss-font:         inherit;
  --wcss-z:            9999;
}

/* ─── Wrapper ───────────────────────────────────────────────────────────── */
.wcss-ac-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* ─── Dropdown ──────────────────────────────────────────────────────────── */
.wcss-autocomplete {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--wcss-z);
  background: var(--wcss-bg);
  border: 1px solid var(--wcss-border);
  border-radius: var(--wcss-radius);
  box-shadow: var(--wcss-shadow);
  overflow: hidden;
  font-family: var(--wcss-font);
  max-height: 480px;
  overflow-y: auto;
}

/* ─── Item ──────────────────────────────────────────────────────────────── */
.wcss-ac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--wcss-text-primary);
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--wcss-border);
}

.wcss-ac-item:last-of-type {
  border-bottom: none;
}

.wcss-ac-item:hover,
.wcss-ac-item--active {
  background: var(--wcss-hover-bg);
}

.wcss-ac-item--active {
  background: var(--wcss-active-bg);
}

/* ─── Thumbnail ─────────────────────────────────────────────────────────── */
.wcss-ac-thumb {
  width:  var(--wcss-thumb-size);
  height: var(--wcss-thumb-size);
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: #f1f5f9;
}

/* ─── Info column ───────────────────────────────────────────────────────── */
.wcss-ac-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.wcss-ac-name {
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wcss-text-primary);
}

.wcss-ac-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--wcss-text-muted);
}

.wcss-ac-sku {
  background: #f1f5f9;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: monospace;
}

.wcss-ac-price {
  font-weight: 600;
  color: var(--wcss-text-primary);
}

.wcss-ac-nostock {
  color: var(--wcss-nostock-color);
  font-weight: 500;
}

/* ─── Highlight ─────────────────────────────────────────────────────────── */
.wcss-autocomplete mark {
  background: var(--wcss-mark-bg);
  color: var(--wcss-mark-color);
  border-radius: 2px;
  padding: 0 1px;
}

/* ─── Footer link ───────────────────────────────────────────────────────── */
.wcss-ac-footer {
  display: block;
  padding: 10px 14px;
  font-size: .88rem;
  text-align: center;
  color: var(--wcss-accent);
  text-decoration: none;
  background: #f8faff;
  border-top: 1px solid var(--wcss-border);
  font-weight: 500;
}

.wcss-ac-footer:hover {
  text-decoration: underline;
}

/* ─── Scrollbar (webkit) ────────────────────────────────────────────────── */
.wcss-autocomplete::-webkit-scrollbar {
  width: 5px;
}
.wcss-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}
.wcss-autocomplete::-webkit-scrollbar-thumb {
  background: var(--wcss-border);
  border-radius: 10px;
}

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wcss-autocomplete {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    max-height: 55vh;
  }

  .wcss-ac-thumb {
    --wcss-thumb-size: 40px;
  }
}