/* ============================================================
   Componente de búsqueda reutilizable (.site-search).
   Mismo aspecto que el buscador del blog para dar coherencia
   visual en toda la web. Radio 10px en todos los controles.
   Usa los tokens globales de style.css (--text, --lime, --border).
   Sin glassmorphism ni sombras fuertes.
   ============================================================ */
.site-search-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.site-search {
  width: 100%;
  margin: 0 auto 22px;
}

.site-search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Campo de texto con icono de lupa y botón de limpiar. */
.site-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.site-search-icon {
  position: absolute;
  left: 14px;
  color: color-mix(in srgb, var(--text, #111) 55%, transparent);
  pointer-events: none;
}

.site-search-input {
  width: 100%;
  min-height: 58px;
  padding: 14px 40px 14px 44px;
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  color: var(--text, #111);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 4px 4px 0 #111;
  transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.site-search-input::placeholder { color: color-mix(in srgb, var(--text, #111) 45%, transparent); font-weight: 400; }
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.site-search-input:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #111; }
.site-search-input:focus-visible {
  outline: none;
  border-color: var(--text, #111);
  box-shadow: 5px 5px 0 #111, 0 0 0 4px color-mix(in srgb, var(--lime, #d9ef67) 60%, transparent);
}

.site-search-clear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--text, #111) 60%, transparent);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.site-search-clear:hover { background: rgba(17, 17, 17, .07); color: var(--text, #111); }
.site-search-clear.is-hidden { display: none; }

/* Selector de orden. */
.site-search-sort {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-sort-select {
  min-height: 58px;
  padding: 14px 36px 14px 16px;
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  color: var(--text, #111);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
}
.site-sort-select:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #111; }
.site-sort-select:focus-visible {
  outline: none;
  border-color: var(--text, #111);
  box-shadow: 5px 5px 0 #111, 0 0 0 4px color-mix(in srgb, var(--lime, #d9ef67) 60%, transparent);
}
.site-sort-caret {
  position: absolute;
  right: 12px;
  color: color-mix(in srgb, var(--text, #111) 60%, transparent);
  pointer-events: none;
}

/* Botón buscar. */
.site-search-submit {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 14px 24px;
  border: 2px solid #111;
  border-radius: 10px;
  background: var(--lime, #d9ef67);
  color: #111;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.site-search-submit:hover { transform: translate(-1px, -1px); background: #e7f98a; box-shadow: 5px 5px 0 #111; }
.site-search-submit:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.site-search-submit:focus-visible {
  outline: none;
  box-shadow: 5px 5px 0 #111, 0 0 0 4px color-mix(in srgb, var(--text, #111) 20%, transparent);
}

/* Chips de filtro (tipo, talla, etc.). */
.site-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.digital-page .site-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid #b9b9b1;
  border-radius: 8px;
  background: #fff;
  color: #33332f;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.digital-page .site-tag-chip:hover {
  transform: translateY(-2px);
  border-color: #111;
  background: #fafafa;
}
.digital-page .site-tag-chip.is-active {
  background: #efff9a;
  border-color: #a8b856;
}
.digital-page .site-tag-chip:active { transform: translateY(0); }
.digital-page .site-tag-chip:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-color: #111;
}

/* Contador de resultados. */
.site-search-count {
  margin: 2px 0 14px;
  color: var(--muted, #56564f);
  font-family: var(--font-body);
  font-size: 14px;
}
.site-search-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .site-search-input, .site-sort-select, .site-search-submit,
  .site-tag-chip, .site-search-clear { transition: none; }
}

@media (max-width: 620px) {
  .site-search-row { flex-wrap: wrap; }
  .site-search-field { flex: 1 1 100%; }
  .site-search-sort { flex: 1 1 100%; }
  .site-sort-select { width: 100%; }
  .site-search-submit { flex: 1 1 100%; width: 100%; }
}