/* Базовые стили для выпадающего списка Manticore WooCommerce Search */
.ui-autocomplete.mws-autocomplete-suggestions {
    position: absolute;
    z-index: 1050; /* Выше большинства элементов Bootstrap */
    cursor: default;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-height: 85vh; /* Ограничение высоты, если много результатов */
    overflow-y: auto;  /* Прокрутка */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    list-style: none; /* Убрать маркеры списка */
}

.mws-autocomplete-suggestions li {
    padding: 0;
    margin: 0;
}

.mws-autocomplete-suggestions li a {
    display: flex; /* Используем flex для выравнивания картинки и текста */
    align-items: center; /* Вертикальное выравнивание по центру */
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.mws-autocomplete-suggestions li:last-child a {
    border-bottom: none;
}

.mws-autocomplete-suggestions li a:hover,
.mws-autocomplete-suggestions li.ui-state-focus a { /* ui-state-focus - класс jQuery UI для активного элемента */
    background-color: #f5f5f5;
    color: #000;
}

.mws-autocomplete-suggestions .mws-item-image {
    width: 40px;
    height: 40px;
    object-fit: cover; /* Масштабирование с сохранением пропорций и обрезкой */
    margin-right: 10px;
    border: 1px solid #eee;
}

.mws-autocomplete-suggestions .mws-item-details {
    display: flex;
    flex-direction: column; /* Имя и цена друг под другом */
}

.mws-autocomplete-suggestions .mws-item-name {
	font-weight: 500;
    font-size: 1em;
    line-height: 1.3;
}

.mws-autocomplete-suggestions .mws-item-price {
    font-size: 0.9em;
    color: #777;
}
.mws-autocomplete-suggestions .mws-item-outofstock {
    font-size: 0.8em;
    color: #cc0000;
    font-style: italic;
}

/* Адаптация под WoodMart (если стандартное поле поиска очень широкое) */
.wd-header-search-form .ui-autocomplete.mws-autocomplete-suggestions {
    /* width: 100% !important; /* Растянуть по ширине родительского контейнера (если нужно) */
    /* Убедитесь, что позиционирование корректно относительно поля ввода WoodMart */
    /* Возможно, потребуется настроить top, left, width в JS, если стандартного не хватит */
}

/* Стили для контейнера категорий */
.mws-autocomplete-categories-container {
    padding: 8px 12px;
    border-bottom: 1px dashed #ddd; /* Отделитель от списка товаров */
    background-color: #f9f9f9;
}

.mws-autocomplete-categories-container .mws-categories-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}

.mws-autocomplete-categories-container .mws-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Расположить кнопки в ряд */
    flex-wrap: wrap; /* Перенос на новую строку, если не влезают */
    gap: 8px; /* Промежуток между кнопками */
}

.mws-autocomplete-categories-container .mws-categories-list li a {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.85em;
    background-color: #e9e9e9;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

.mws-autocomplete-categories-container .mws-categories-list li a:hover {
    background-color: #d0d0d0;
    border-color: #c0c0c0;
}


/* Стили для ГЛОБАЛЬНОГО контейнера категорий */
.mws-global-categories-container {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-bottom: 1px dashed #ddd; /* Если он над списком товаров */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 8px 12px;
    /* z-index должен быть таким, чтобы он был видим, но не перекрывал другие важные элементы */
}

.mws-global-categories-container .mws-categories-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}

.mws-global-categories-container .mws-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mws-global-categories-container .mws-categories-list li a {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.85em;
    background-color: #e9e9e9;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

.mws-global-categories-container .mws-categories-list li a:hover {
    background-color: #d0d0d0;
    border-color: #c0c0c0;
}



/* Стили для контейнера категорий ВНУТРИ виджета */
.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget {
    padding: 8px 12px;
    /* border-bottom: 1px dashed #ddd; /* Можно оставить, если красиво смотрится */
    /* background-color: #f9f9f9; /* Может быть лишним, если виджет уже имеет фон */
    margin-bottom: 5px; /* Отступ от списка товаров */
}

/* Убираем заголовок, если он не нужен
.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget .mws-categories-title {
    display: none;
}
*/

.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget .mws-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Уменьшил промежуток для компактности */
}

.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget .mws-categories-list li {
    margin: 0; /* Убираем лишние отступы у li */
    padding: 0;
}

.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget .mws-categories-list li a.button.button-mws {
    /* Стили WordPress для .button могут быть довольно большими. */
    /* Возможно, их нужно будет переопределить для компактности. */
    font-size: 0.8em; /* Меньше шрифт */
    padding: 3px 5px; /* Меньше padding */
    line-height: normal;
	border-radius: 5px;
	min-height: 26px;
}

.mws-autocomplete-suggestions .mws-autocomplete-categories-in-widget .mws-categories-list li a.button.button-mws:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}


.mws-autocomplete-suggestions .mws-item-name mark.mws-highlight {
    font-weight: bold;
    background-color: transparent; /* Убираем стандартный желтый фон <mark> */
    color: inherit; /* Наследуем цвет текста родителя */
    /* Можно добавить padding: 0; если <mark> добавляет свои отступы */
}
mark.mws-highlight {
    padding: 0;
}





/* ... (ваши стили для .mws-autocomplete-suggestions, .mws-item-name, .mws-item-image и т.д.) ... */

/* Стили для блока с категориями */
.mws-autocomplete-suggestions .mws-categories-block {
    display: flex; /* Расположить карточки категорий в ряд */
    flex-wrap: wrap; /* Позволить перенос на новую строку */
    gap: 10px; /* Промежуток между карточками категорий */
    padding: 10px 12px; /* Отступы внутри блока категорий */
    border-bottom: 1px solid #eee; /* Разделитель от списка товаров */
    margin-bottom: 5px; /* Отступ до списка товаров */
}

.mws-autocomplete-suggestions .mws-category-item {
    display: flex; /* Для расположения картинки и текста внутри карточки */
    align-items: center; /* Выровнять по центру вертикально */
    text-decoration: none;
    color: #333;
 /*   border: 1px solid #ddd;
    border-radius: 4px; */
    padding: 3px;
    /* background-color: #f9f9f9; /* Легкий фон для карточки */
    /* width: calc(33.333% - 10px); /* Примерно 3 карточки в ряд, если нужно */
    /* box-sizing: border-box; */
    transition: background-color 0.2s;
	justify-content: flex-start;
	width: 100%;
}

.mws-autocomplete-suggestions .mws-category-item:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.mws-autocomplete-suggestions .mws-category-image {
    width: 40px;  /* Размер превью картинки категории */
    height: 40px;
    object-fit: cover;
    margin-right: 8px;
    border-radius: 3px; /* Скругление для картинки */
}

.mws-autocomplete-suggestions .mws-category-info {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
}

.mws-autocomplete-suggestions .mws-category-name {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.3;
}

.mws-autocomplete-suggestions .mws-category-hierarchy {
    font-size: 11px;
    color: #777;
    line-height: 1.2;
}









/* ... (ваши стили для категорий и товаров) ... */

/* Стили для блока с атрибутами-подсказками */
.mws-autocomplete-suggestions .mws-attribute-suggestions-block {
    padding: 8px 12px;
    margin-bottom: 5px; /* Отступ от блока категорий или товаров */
    border-bottom: 1px dotted #e0e0e0; /* Легкий разделитель */
}

.mws-autocomplete-suggestions .mws-attribute-suggestions-block .mws-attributes-list {
    display: flex;
    flex-wrap: wrap;
}

.mws-autocomplete-suggestions .mws-attribute-suggestion { /* Это span.mws-attribute-suggestion.facetwp-radio */
    display: inline-block;
	font-size: 12px;
}

.mws-autocomplete-suggestions .mws-attribute-suggestion:hover {
    background-color: #e9e9e9;
    border-color: #c9c9c9;
}

/* Если вы используете facetwp-radio и хотите, чтобы они выглядели как радио-кнопки (опционально) */
/* .mws-attribute-suggestion.facetwp-radio { ... } */