/*
  De zoekoverlay.

  De .search-regels uit het style-blok van product.html, ongewijzigd
  overgenomen. Diezelfde overlay stond ook in TGP_website_v52.html.

  De knop die hem opent staat in header.php en heeft zijn eigen opmaak in
  header.css, die staat hier dus niet nog een keer.
*/

.search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(26, 15, 18, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 950; opacity: 0; visibility: hidden; transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1), visibility 0.35s; }

.search-overlay.open { opacity: 1; visibility: visible; }

.search-overlay-inner { background: var(--cream); max-width: 760px; margin: 5vh auto 0; border-radius: 22px; padding: 1.5rem 2rem 2rem; box-shadow: 0 30px 80px rgba(26,15,18,0.25); transform: translateY(-20px) scale(0.98); opacity: 0; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s; }

.search-overlay.open .search-overlay-inner { transform: translateY(0) scale(1); opacity: 1; }

@media (max-width: 700px) {
  .search-overlay-inner { margin: 0; min-height: 100vh; border-radius: 0; padding: 1rem 1.2rem 2rem; }
}

.search-bar { display: flex; align-items: center; gap: 0.9rem; border-bottom: 1px solid rgba(158,90,110,0.18); padding: 0.5rem 0 1rem; }

.search-icon { color: var(--mauve); flex-shrink: 0; }

.search-input { flex: 1; border: none; background: none; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--noir); outline: none; letter-spacing: -0.005em; padding: 0.3rem 0; }

.search-input::placeholder { color: rgba(158,90,110,0.55); font-style: italic; }

.search-close { background: none; border: 1px solid rgba(158,90,110,0.25); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--mauve); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }

.search-close:hover { background: var(--noir); color: var(--cream); border-color: var(--noir); }

.search-section-label { font-family: 'Jost', sans-serif; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mauve); margin: 1.4rem 0 0.9rem; font-weight: 500; }

.search-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.search-tag { background: white; border: 1px solid rgba(158,90,110,0.18); padding: 0.55rem 1.1rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--noir); cursor: pointer; transition: all 0.25s cubic-bezier(0.22,1,0.36,1); font-weight: 300; letter-spacing: 0.01em; }

.search-tag:hover { border-color: var(--wine); background: var(--wine); color: var(--cream); transform: translateY(-1px); }

.search-results { margin-top: 1rem; max-height: 60vh; overflow-y: auto; }

.search-result { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 0.6rem; border-radius: 12px; cursor: pointer; transition: background 0.2s; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(158,90,110,0.08); }

.search-result:hover { background: rgba(255,255,255,0.7); }

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

.search-result-thumb { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(160deg, rgba(253,246,240,1), rgba(242,196,206,0.4)); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--wine); flex-shrink: 0; }

.search-result-info { min-width: 0; }

.search-result-name { font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--noir); font-weight: 400; margin-bottom: 0.2rem; letter-spacing: 0.01em; }

.search-result-inspired { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.85rem; color: var(--mauve); }

.search-result-price { font-family: 'Jost', sans-serif; font-weight: 500; color: var(--noir); font-size: 0.92rem; flex-shrink: 0; padding-left: 0.5rem; }

.search-empty { padding: 2rem 1rem; text-align: center; color: var(--mauve); }

.search-empty p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; margin: 0 0 0.4rem; }

.search-empty .search-empty-hint { font-family: 'Jost', sans-serif; font-style: normal; font-size: 0.85rem; color: var(--mauve); opacity: 0.7; font-weight: 300; }

body.search-open { overflow: hidden; }