/* Э1 (T-56): подсказки поиска шапки. Паспорт search-dropdown - pending_capture (макета выпадашки нет, лимит Figma AI до 16.11): карточка товара
   собрана из токенов product-card (фото 64, название 14/19.6, цена), заголовки групп - как заголовки колонок подвала. Цвета, радиусы, шрифты - токены. */
.sp-search {
    position: relative;
}

.sp-search__clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--text-dark-grey);
    background: transparent;
    cursor: pointer;
}

.sp-search__clear[hidden] {
    display: none;
}

.sp-search__clear:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 0;
}

.sp-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    box-sizing: border-box;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-md);
    color: var(--text-black);
    background: var(--bg-white);
    box-shadow: var(--elevation-4);
    font-family: var(--font-base);
    overscroll-behavior: contain;
}

.sp-search__panel[hidden] {
    display: none;
}

.sp-search__groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-search__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-search__title {
    margin: 0;
    color: var(--text-dark-grey);
    font: 600 12px/14.4px var(--font-base);
    text-transform: uppercase;
}

.sp-search__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-search__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-black);
    text-decoration: none;
}

.sp-search__item:hover,
.sp-search__item:focus-visible,
.sp-search__item.is-active {
    background: var(--color-hover);
    outline: 0;
}

.sp-search__thumb {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xs);
    background: var(--color-main-xlight-blue);
    overflow: hidden;
}

.sp-search__thumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sp-search__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-search__name {
    font: 400 14px/19.6px var(--font-base);
    overflow-wrap: anywhere;
}

.sp-search__name b {
    font-weight: 600;
}

.sp-search__note {
    color: var(--text-dark-grey);
    font: 400 12px/15.6px var(--font-base);
}

.sp-search__price {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-pink);
    font: 600 14px/16.8px var(--font-base);
    white-space: nowrap;
}

.sp-search__old {
    color: var(--text-gray);
    font: 400 12px/15.6px var(--font-base);
}

.sp-search__all {
    display: block;
    margin-top: 16px;
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-main);
    font: 600 14px/19.6px var(--font-base);
    text-align: center;
    text-decoration: none;
}

.sp-search__all:hover,
.sp-search__all:focus-visible {
    background: var(--color-hover);
    outline: 0;
}

.sp-search__empty {
    margin: 0;
    padding: 8px;
    color: var(--text-dark-grey);
    font: 400 14px/19.6px var(--font-base);
}

.sp-search__panel[aria-busy="true"] {
    opacity: 0.6;
}

/* мобильный режим (до 640 px): полноэкранный диалог поиска; поле шапки - таблетка, по касанию открывает диалог */
.sp-search-dlg {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-0);
    color: var(--text-black);
    background: var(--bg-white);
    overflow: hidden;
}

.sp-search-dlg[open] {
    display: flex;
    flex-direction: column;
}

.sp-search-dlg__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.sp-search-dlg__bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke-grey-light);
}

.sp-search-dlg__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-normal);
    border-radius: var(--radius-full);
    color: var(--text-black);
    background: var(--bg-white);
    font: 400 16px/20.8px var(--font-base);
}

.sp-search-dlg__input:focus {
    border-color: var(--stroke-focused);
    outline: 0;
}

.sp-search-dlg__cancel {
    flex: none;
    height: 44px;
    padding: 0 8px;
    border: 0;
    color: var(--color-main);
    background: transparent;
    font: 600 14px/1 var(--font-base);
    cursor: pointer;
}

.sp-search__panel--dialog {
    position: static;
    flex: 1 1 auto;
    max-height: none;
    border: 0;
    border-radius: var(--radius-0);
    box-shadow: none;
}

@media (min-width: 640px) {
    .sp-search-dlg {
        display: none !important;
    }
}

@media (max-width: 639px) {
    .sp-search .sp-search__panel,
    .sp-search .sp-search__clear {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-search__panel {
        transition: none;
    }
}

/* штатная кнопка очистки поля type=search скрыта: своя кнопка [data-sp-search-clear] одинакова во всех браузерах */
.sp-search input[type="search"]::-webkit-search-cancel-button,
.sp-search-dlg input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}