/* Header search autocomplete (ase-search.js). Every class is prefixed ase-search__. The dropdown is
   appended to <body> with fixed positioning (left/top/width set by the script), so no header wrapper
   can clip it. */

.ase-search__dropdown {
  position: fixed;
  z-index: 1040;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.ase-search__dropdown[hidden] { display: none; }

.ase-search__dropdown *,
.ase-search__dropdown *::before,
.ase-search__dropdown *::after { box-sizing: border-box; }

.ase-search__columns {
  display: flex;
  align-items: stretch;
}

.ase-search__section { min-width: 0; }
.ase-search__section--products { flex: 2; }
.ase-search__section--categories { flex: 1; }

.ase-search__section--products + .ase-search__section--categories {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid #e5e5e5;
}

.ase-search__columns + .ase-search__section--articles {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}

.ase-search__section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-navy, #666);
}

.ase-search__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ase-search__section--articles .ase-search__list { gap: 20px; }

.ase-search__item {
  display: block;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #000;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .12s ease, color .12s ease;
}

.ase-search__item:hover,
.ase-search__item:focus-visible,
.ase-search__item--active {
  background: var(--st-soft, #f0f2f3);
  color: var(--st-navy, #000);
  text-decoration: none;
}

/* The keyboard highlight also gets a navy edge, so it reads clearly against the light hover. */
.ase-search__item--active { box-shadow: inset 3px 0 0 var(--st-navy, #000); }

.ase-search__product {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ase-search__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f4f6;
}

.ase-search__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ase-search__product-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ase-search__product-title,
.ase-search__article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
}

.ase-search__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.ase-search__price-current {
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

.ase-search__price-original {
  font-size: 13px;
  color: #717171;
  text-decoration: line-through;
  white-space: nowrap;
}

.ase-search__article-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--st-muted, #687477);
}

.ase-search__empty {
  margin: 0;
  color: var(--st-muted, #687477);
}

.ase-search__footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.ase-search__view-all {
  display: inline-block;
  margin: 0;
  font-weight: 700;
}

.ase-search__skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ase-search__skeleton-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ase-search__skeleton {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: ase-search__shimmer 1.2s linear infinite;
}

.ase-search__skeleton--thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  border-radius: 6px;
}

.ase-search__skeleton--short { width: 60%; }

@keyframes ase-search__shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ase-search__skeleton { animation: none; }
}

@media (min-width: 992px) {
  .ase-search__dropdown { max-width: 60vw; }
}

@media (max-width: 767px) {
  .ase-search__dropdown { padding: 16px; }
  .ase-search__columns { flex-direction: column; }
  .ase-search__section--products + .ase-search__section--categories {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid #e5e5e5;
  }
}