/* Cacao Boys: search form and search results.
   Scope: .cb-searchform (header + results page) and .cb-search (results page).
   Tokens come from tokens.css; nothing here defines its own colour. */

/* ---------- the form ---------- */

.cb-searchform {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cb-surface);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-pill);
  padding: 0.28rem 0.28rem 0.28rem 1rem;
}

.cb-searchform:focus-within {
  border-color: var(--cb-border-strong);
}

.cb-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.45rem 0;
}

.cb-searchform__input::placeholder { color: var(--cb-text-muted); }

/* The wrapper already shows focus, so the inner ring would just double it. */
.cb-searchform__input:focus { outline: none; }

/* Safari paints its own decorations inside type="search". */
.cb-searchform__input::-webkit-search-decoration,
.cb-searchform__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.cb-searchform__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  cursor: pointer;
  transition: background var(--cb-transition), color var(--cb-transition);
}

.cb-searchform__submit:hover {
  background: var(--cb-btn-hover-bg);
  color: var(--cb-btn-hover-text);
}

/* ---------- header disclosure ---------- */

.cb-search-toggle { position: relative; }

.cb-search-toggle > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cb-radius-pill);
  border: var(--cb-border-width) solid var(--cb-border);
  color: var(--cb-text);
  transition: background var(--cb-transition);
}

.cb-search-toggle > summary::-webkit-details-marker { display: none; }
.cb-search-toggle > summary:hover { background: var(--cb-surface-inset); }

/* Magnifier swaps to a close glyph while the panel is open, matching the
   burger's behaviour in main.css. */
.cb-search-toggle[open] > summary > svg { display: none; }
.cb-search-toggle[open] > summary::after {
  content: "\2715";
  font-size: 0.95rem;
  line-height: 1;
}

.cb-search-toggle__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 20rem;
  max-width: 78vw;
  background: var(--cb-surface);
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  padding: 0.6rem;
}

/* Inside the panel the field already sits on a panel surface. */
.cb-search-toggle__panel .cb-searchform {
  background: var(--cb-bg);
}

/* The mobile menu carries its own copy of the form, so the header's
   standalone search control would be a second entry point in the same row. */
@media (max-width: 1023.98px) {
  .cb-search-toggle { display: none; }
}

/* The form as it appears inside the mobile nav panel. */
.cb-nav-toggle__panel .cb-searchform {
  margin: 0 0 0.75rem;
  background: var(--cb-bg);
}

/* ---------- results page ---------- */

.cb-search {
  padding: 3rem 0 5rem;
}

.cb-search__head {
  max-width: 44rem;
  margin: 0 0 2.5rem;
}

.cb-search__title {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 1.25rem;
}

.cb-search__term { color: var(--cb-accent-text); }

.cb-search__form { max-width: 32rem; }

.cb-search__count {
  margin: 0.9rem 0 0;
  color: var(--cb-text-muted);
  font-size: 0.92rem;
}

.cb-search__group { margin: 0 0 3.25rem; }

.cb-search__group-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--cb-font-heading);
  font-size: 1.05rem;
  font-weight: var(--cb-weight-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--cb-border-width) solid var(--cb-border);
}

.cb-search__group-count {
  font-size: 0.8rem;
  font-weight: var(--cb-weight-body);
  letter-spacing: 0;
  color: var(--cb-text-muted);
}

/* The product grid is the shop's own, so only the outer spacing is set here.
   .cb-woo carries page padding on the shop; inside a results group it must not. */
.cb-search__products.cb-woo { padding: 0; }

.cb-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.cb-search__item {
  max-width: var(--cb-faq-measure);
}

.cb-search__item-link {
  text-decoration: none;
  color: var(--cb-text);
}

.cb-search__item-title {
  display: block;
  font-family: var(--cb-font-heading);
  font-size: 1.12rem;
  font-weight: var(--cb-weight-heading);
  line-height: 1.35;
}

.cb-search__item-link:hover .cb-search__item-title { color: var(--cb-accent-text); }

.cb-search__item-meta {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--cb-text-muted);
}

.cb-search__item-snippet {
  margin: 0.4rem 0 0;
  color: var(--cb-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Vertical padding only. Horizontal padding widens the highlight past the word
   and visually detaches the punctuation that follows it, so a hit on the last
   word of a question renders as "How much is shipping ?". */
.cb-search__mark {
  background: color-mix(in oklch, var(--cb-wheat) 80%, transparent);
  color: inherit;
  padding: 0.12em 0;
  border-radius: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.cb-search__empty {
  max-width: var(--cb-faq-measure);
  color: var(--cb-text-muted);
  line-height: 1.7;
}

.cb-search__empty-help { margin-top: 0.4rem; }

.cb-search__empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 599.98px) {
  .cb-search { padding: 2rem 0 3.5rem; }
  .cb-search__group { margin-bottom: 2.5rem; }
}