/* Пошук у шапці + сторінка результатів (ТЗ розділ 6).
   Підключається після boutique.css (залежність chaynyi-butik-theme). */

/* ============================================================
   1. Поле пошуку в хедері (десктоп)
   ============================================================ */

.cb-search {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(190px, 16vw, 290px);
  border: 1px solid rgba(23, 19, 15, .14);
  background: var(--cb-paper-bright);
  transition: border-color 160ms ease;
}

.cb-search:focus-within {
  border-color: rgba(177, 138, 75, .7);
}

.cb-search__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--cb-muted);
  cursor: pointer;
}

.cb-search__label .material-symbols-outlined {
  font-size: 20px;
}

/* Текст «Пошук» лишається для скрінрідерів, візуально — лише іконка. */
.cb-search__label-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cb-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 4px 0 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--cb-ink);
  font-family: var(--cb-sans);
  font-size: 14px;
  line-height: 1.2;
}

.cb-search__input::placeholder {
  color: rgba(113, 105, 96, .8);
}

.cb-search__input::-webkit-search-cancel-button,
.cb-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.cb-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  transition: color 160ms ease, opacity 160ms ease;
}

.cb-search__submit .material-symbols-outlined {
  font-size: 20px;
}

.cb-search__submit:hover,
.cb-search__submit:focus-visible {
  color: var(--cb-brass);
}

.cb-search.is-loading .cb-search__submit {
  opacity: .4;
  pointer-events: none;
}

/* Тогл мобільного пошуку на десктопі не показуємо.
   .cb-header підвищує специфічність над .cb-actions button у boutique.css. */
.cb-header .cb-search-toggle {
  display: none;
}

/* Кнопка закриття існує лише в мобільній панелі. */
.cb-search__close {
  display: none;
}

/* ============================================================
   2. Панель підказок (спільна для десктопу і мобільної панелі)
   ============================================================ */

.cb-search__suggest[hidden] {
  display: none;
}

.cb-search__suggest {
  position: absolute;
  top: calc(100% + 8px);
  right: -1px;
  left: -1px;
  z-index: 65;
  padding: 6px 0;
  border: 1px solid rgba(177, 138, 75, .35);
  background: var(--cb-paper-bright);
  box-shadow: 0 18px 40px rgba(23, 19, 15, .18);
}

.cb-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.cb-search__item:hover,
.cb-search__item.is-active,
.cb-search__item:focus-visible {
  background: rgba(177, 138, 75, .12);
  outline: 0;
}

.cb-search__item:focus-visible {
  outline: 2px solid var(--cb-brass);
  outline-offset: -2px;
}

.cb-search__item-photo {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(23, 19, 15, .08);
  background: var(--cb-paper);
  object-fit: cover;
}

.cb-search__item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cb-search__item-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--cb-ink);
  font-family: var(--cb-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.15;
}

.cb-search__item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-family: var(--cb-sans);
  font-size: 13px;
  line-height: 1.3;
}

.cb-search__item-price {
  color: var(--cb-ink);
  font-weight: 500;
}

.cb-search__item-stock.is-in {
  color: var(--cb-muted);
}

.cb-search__item-stock.is-out {
  color: var(--cb-burgundy);
}

.cb-search__item-sku {
  color: rgba(113, 105, 96, .72);
  font-size: 12px;
  letter-spacing: .04em;
}

.cb-search__empty {
  padding: 14px 16px;
  color: var(--cb-muted);
  font-size: 14px;
}

/* ============================================================
   3. Мобільна панель: тогл + фіксована панель під час .is-open.
   Брейкпоінт узгоджено з .cb-menu-button у boutique.css (≤767px).
   ============================================================ */

@media (max-width: 767px) {
  /* Сітка .cb-actions у boutique.css — 48px 1fr 48px (бургер / лого / кошик).
     Тогл кладемо в середню колонку впритул до кошика. */
  .cb-header .cb-search-toggle {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    height: 44px;
    pointer-events: auto;
  }

  /* У потоці хедера поле сховано в boutique.css (display:none !important);
     панель показуємо лише за .is-open. */
  .cb-header .cb-search {
    position: fixed;
    inset: 0 0 auto;
    z-index: 65;
    width: auto;
  }

  .cb-header .cb-search.is-open {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 20px 18px;
    border-bottom: 1px solid rgba(23, 19, 15, .14);
    background: var(--cb-paper-bright);
    box-shadow: 0 18px 40px rgba(23, 19, 15, .22);
  }

  /* Поле займає весь вільний простір рядка: [лупа][поле][стрілка][×]. */
  .cb-header .cb-search__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cb-header .cb-search__label,
  .cb-header .cb-search__submit {
    width: 44px;
    height: 44px;
  }

  .cb-header .cb-search__label .material-symbols-outlined,
  .cb-header .cb-search__submit .material-symbols-outlined,
  .cb-header .cb-search__close .material-symbols-outlined {
    font-size: 22px;
  }

  /* 16px — щоб iOS не зумив поле при фокусі. */
  .cb-header .cb-search__input {
    height: 44px;
    font-size: 16px;
  }

  .cb-header .cb-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--cb-muted);
    cursor: pointer;
  }

  .cb-header .cb-search__close:hover,
  .cb-header .cb-search__close:focus-visible {
    color: var(--cb-brass);
  }

  /* Підказки — всередині панелі, на власному рядку під полем. */
  .cb-header .cb-search__suggest {
    position: static;
    flex: 0 0 100%;
    margin-top: 10px;
    box-shadow: none;
  }
}

/* ============================================================
   4. Сторінка результатів пошуку (search.php).
   Класи свідомо з префіксом cb-search-results-*: utility-pages.css
   має власні .cb-search-results/.cb-search-result — не перетинаємось.
   Шапку сторінки (.cb-search-header) та пагінацію (.cb-search-pagination)
   стилізує utility-pages.css, який і так підключається на is_search().
   ============================================================ */

.cb-search-results-catalog,
.cb-search-results-empty {
  padding-right: max(var(--cb-gutter), calc((100% - var(--cb-container)) / 2));
  padding-left: max(var(--cb-gutter), calc((100% - var(--cb-container)) / 2));
}

.cb-search-results-catalog {
  margin-top: clamp(40px, 5vw, 72px);
}

.cb-search-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cb-plaster);
  border-left: 1px solid var(--cb-plaster);
}

.cb-search-results-card {
  min-width: 0;
  border-right: 1px solid var(--cb-plaster);
  border-bottom: 1px solid var(--cb-plaster);
}

.cb-search-results-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 20px 26px;
  transition: background-color 180ms ease;
}

.cb-search-results-card > a:hover,
.cb-search-results-card > a:focus-visible {
  background: rgba(177, 138, 75, .08);
  outline: 0;
}

.cb-search-results-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--cb-paper);
  object-fit: cover;
}

.cb-search-results-card.is-out .cb-search-results-photo {
  opacity: .55;
}

.cb-search-results-name {
  margin-top: 20px;
  color: var(--cb-ink);
  font-family: var(--cb-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
}

.cb-search-results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 14px;
  font-family: var(--cb-sans);
  font-size: 13px;
  line-height: 1.35;
}

.cb-search-results-price {
  color: var(--cb-ink);
  font-weight: 600;
}

.cb-search-results-price .woocommerce-Price-amount {
  font-weight: 600;
}

.cb-search-results-stock.is-in {
  color: var(--cb-muted);
}

.cb-search-results-stock.is-out {
  color: var(--cb-burgundy);
}

.cb-search-results-sku {
  color: rgba(113, 105, 96, .72);
  font-size: 12px;
  letter-spacing: .04em;
}

.cb-search-results-empty {
  margin-top: clamp(40px, 5vw, 64px);
}

.cb-search-results-empty p {
  max-width: 640px;
  color: var(--cb-muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}

.cb-search-results-empty strong {
  color: var(--cb-ink);
  font-weight: 500;
}

.cb-search-results-empty-actions {
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .cb-search-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cb-search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-search-results-card > a {
    padding: 18px 14px 20px;
  }

  .cb-search-results-name {
    margin-top: 14px;
    font-size: 19px;
  }
}