/**
 * Atelier — Search overlay + autocomplete (C4). Opened from the header
 * "Search" link: a full-width panel dropping from the top of the page
 * with a large input, live suggestion list (product + category groups),
 * and popular-terms shortcuts (reusing the same tag-cloud idea as T39).
 */
.atl-search-overlay {
  position: fixed;
  inset: 0;
  background: var(--atl-overlay-scrim);
  z-index: 65;
  display: none;
}
.atl-search-overlay[data-open] { display: block; }

.atl-search-panel {
  background: var(--atl-bg);
  border-bottom: 1px solid var(--atl-border);
  padding: 32px 48px;
  max-width: 900px;
  margin: 0 auto;
}
.atl-search-form { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--atl-text); padding-bottom: 12px; }
.atl-search-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 24px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--atl-text);
  outline: none;
}
.atl-search-input::placeholder { color: var(--atl-text-subtle); }
.atl-search-close { background: none; border: none; font-size: 20px; color: var(--atl-text-muted); cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; font-family: inherit; }
.atl-search-close:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }

.atl-search-section { margin-top: 24px; }
.atl-search-section-title { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); margin-bottom: 12px; }

.atl-search-suggestions { display: flex; flex-direction: column; }
.atl-search-suggestion { display: flex; align-items: center; gap: 14px; padding: 10px 0; text-decoration: none; color: var(--atl-text); }
.atl-search-suggestion-media { width: 44px; aspect-ratio: 3/4; background: var(--atl-surface); border: 1px solid var(--atl-border); flex-shrink: 0; }
.atl-search-suggestion-name { font-size: 14px; }
.atl-search-suggestion-price { font-size: 12.5px; color: var(--atl-text-muted); margin-left: auto; }

.atl-search-terms { display: flex; gap: 10px; flex-wrap: wrap; }
.atl-search-term { font-size: 13px; padding: 7px 14px; border: 1px solid var(--atl-border-strong); border-radius: 999px; color: var(--atl-text); text-decoration: none; }
.atl-search-term:focus-visible, .atl-search-suggestion:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }

@media (max-width: 767px) {
  .atl-search-panel { padding: 20px; }
  .atl-search-input { font-size: 18px; }
}