<?php
declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Framework\Escaper;
use Magento\Search\Helper\Data as SearchHelper;
use Mirasvit\SearchAutocomplete\Block\Injection;
use Mirasvit\SearchAutocomplete\Model\ConfigProvider;

/**
 * @var Escaper           $escaper
 * @var SearchHelper      $helper
 * @var Injection         $block
 * @var ViewModelRegistry $viewModels
 */

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper
$helper             = $this->helper(SearchHelper::class);
$config             = $block->getJsConfig();
$layoutFull         = ConfigProvider::LAYOUT_IN_PAGE === $config['layout'];
$filterOnTop        = ConfigProvider::ON_TOP === $block->getLayeredNavigationPosition();
$filterInSidebar    = ConfigProvider::IN_SIDEBAR === $block->getLayeredNavigationPosition();
$layoutTwoColumns   = (ConfigProvider::LAYOUT_2_COLUMNS === $config['layout'])
    || ((ConfigProvider::LAYOUT_IN_PAGE === $config['layout']) && $filterInSidebar);
$paginationPosition = $block->getPaginationPosition();
/** @var HeroiconsOutline $heroicons */
$heroicons          = $viewModels->require(HeroiconsOutline::class);

$titleCSS = 'font-sen text-base font-bold leading-normal transition appearance-none text-blue-950 lg:text-xl border-b border-100 p-2 flex flex-col';
$itemCSS  = 'mst-searchautocomplete__item flex flex-col items-center font-sen text-base card p-1 m-1';
?>

<?php /** Main Search Area */ ?>

<div class="search-content-wrapper"
     <?php if ($layoutFull): ?>:class="{'z-50 fixed top-0 left-0 w-full h-full lg:py-8 bg-gray-600/50' : isContainerOpen}"<?php endif; ?>
     x-data="initMirasvitSearch()" x-init="$nextTick(showPrevSearch($el))"
     @click.away="closeSearch">
    <div class="mx-auto text-black<?php if (!$layoutFull): ?> container py-2<?php endif; ?>"
         <?php if ($layoutFull): ?>:class="{'card' : isContainerOpen}"<?php endif; ?>
         @click.away="closeSearch">
        <div class="">
            <form class="form minisearch relative"
                  <?php if ($layoutFull): ?>:class="{'flex justify-between' : isContainerOpen}"<?php endif; ?>
                  id="search_mini_form"
                  action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>"
                  method="get"
                  autocomplete="off">
                <label class="hidden" for="search" data-role="minisearch-label">
                    <span><?= $escaper->escapeHtml(__('Search')) ?></span>
                </label>
                <template x-if="layoutFull && isContainerOpen">
                    <span class="text-gray-400 left-0 p-3">
                        <?= $heroicons->searchHtml('text-gray-400', 40, 40); ?>
                    </span>
                </template>

                <div class="relative">
                    <input id="search" x-ref="searchInput" type="search"
                           name="<?= $escaper->escapeHtmlAttr($helper->getQueryParamName()) ?>"
                           value="<?= $escaper->escapeHtmlAttr($helper->getEscapedQueryText()) ?>"
                           placeholder="<?= $escaper->escapeHtmlAttr(__('Search product name, code or brand')) ?>"
                           maxlength="<?= $escaper->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
                           class="border border-black w-full p-3.5 rounded pr-12 text-lg leading-normal transition appearance-none text-black focus:outline-none focus:border-transparent"                           <?php if ($layoutFull): ?>:class="{'border-0 outline-0 shadow-none ring-0 ring-offset-0 focus:shadow-none': isContainerOpen}"<?php endif; ?>
                           x-on:click="preOpen"
                           x-on:search-open.window="preOpen"
                           x-on:search-open.window.debounce.20="$el.focus(); $el.select()"
                           x-on:search-open.window.debounce.100="startSearch($refs.searchInput.value)"
                           x-on:search-open.window.debounce.150="openSearch"
                           x-on:search-open.window.debounce.300="doSearch($refs.searchInput.value)"
                           x-on:keydown.debounce.100="startSearch($refs.searchInput.value)"
                           x-on:click.debounce.150="openSearch"
                           x-on:click.debounce.300="doSearch($refs.searchInput.value)"
                           x-on:keyup.debounce.300="doSearch($refs.searchInput.value)"/>
                    <svg
                        x-show="!hasSearchResults || !isOpen"
                        style="top: 26px;"
                        class="absolute right-3 -translate-y-1/2 pointer-events-none w-6 h-6 text-blue-900"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 23 23"
                        fill="none"
                    >
                        <path d="M15.3607 2.54105C11.8516 -0.847018 6.14031 -0.847018 2.63124 2.54105C-0.877078 5.92986 -0.877078 11.4435 2.63124 14.8323C5.75616 17.8487 10.6231 18.1719 14.1299 15.8165C14.2037 16.1536 14.3725 16.4753 14.6441 16.7375L19.7544 21.6716C20.4991 22.3892 21.7026 22.3892 22.4435 21.6716C23.1874 20.9533 23.1874 19.7914 22.4435 19.0753L17.3331 14.1397C17.0631 13.8797 16.7292 13.7159 16.38 13.6447C18.8211 10.258 18.4864 5.55969 15.3607 2.54105ZM13.7472 13.2745C11.1274 15.804 6.86373 15.804 4.24466 13.2745C1.62636 10.745 1.62636 6.62907 4.24466 4.09958C6.86373 1.57083 11.1274 1.57083 13.7472 4.09958C16.3671 6.62907 16.3671 10.745 13.7472 13.2745Z" fill="currentColor"/>
                    </svg>
                </div>
                <template x-if="layoutFull && isContainerOpen">
                    <div class="right-0 top-0 p-3 flex">
                        <div class="mstInPage__indexList items-center hidden lg:flex font-sen text-base lg:text-lg">
                            <div>
                                <a class="mstInPage__viewAll whitespace-nowrap mr-10 text-blue-500 no-underline"
                                   x-show="searchResults['magento_catalog_product']"
                                   :href="numberResultsUrl">
                                    <?= $escaper->escapeHtml(__('View all results →')) ?>
                                </a>
                            </div>

                            <div class="flex">
                                <template x-for="(searchResult, identifier) in searchResults">
                                    <template x-if="!!searchResult.totalItems">
                                        <div
                                                class="mstInPage__index flex h-10 mr-1.5 px-2 pt-2 lg:pt-1 text-center align-middle inline-block rounded border border-transparent cursor-pointer whitespace-nowrap"
                                                @click="activateSection(identifier)"
                                                :class="{ 'active bg-blue-600 text-white' : activeIndex === identifier }">
                                            <span x-text="searchResult.title"></span>
                                            <small class="ml-1"
                                                   :class="activeIndex === identifier ? 'text-gray-50' : 'text-gray-500'">
                                                (<span x-html="searchResult.totalItems"></span>)
                                            </small>
                                        </div>
                                    </template>
                                </template>
                            </div>
                        </div>
                        <span @click="closeSearch" class="cursor-pointer">
                    <?= $heroicons->xHtml('text-gray-400', 40, 40); ?>
                </span>
                    </div>
                </template>

            </form>


            <?php if ($config['popularSearches'] && !$layoutFull) : ?>
                <template x-if="showHotSearch">
                    <div class="absolute card w-full mt-1 z-50 left-0" x-show="isOpen">
                        <p class="<?= $titleCSS ?>">
                            <?= $escaper->escapeHtml(__($config['popularTitle'])) ?>
                        </p>
                        <div class="my-3 flex flex-wrap">

                            <?php foreach ($config['popularSearches'] as $search) : ?>
                                <span x-on:click="hotSearchClickEvent"
                                      class="m-1 bg-gray-200 hover:bg-gray-300 rounded-full px-2 font-bold font-sen text-smleading-loose cursor-pointer">
                                    <?= $escaper->escapeHtml(__($search)) ?>
                                </span>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </template>
            <?php endif; ?>
            <div x-cloak
                 id="mirasvitSearchResults"
                 class="border-solid lg:p-2 mt-1 text-lg leading-normal transition appearance-none text-gray-800 lg:text-xl z-30 my-1<?php if (!$layoutFull): ?> w-full left-0 absolute<?php endif; ?>"
                 x-show="isOpen">
                <?= $block->getChildHtml('loading.search') ?>
                <template x-if="hasSearchResults">
                    <div class="flex flex-col 3xl:max-w-screen-2xl 2xl:container">
                        <!--    Search Results    -->
                        <div class="overflow-y-auto overflow-x-hidden bg-white <?php if ($layoutFull && $filterOnTop): ?> contents<?php endif; ?><?php if ($layoutTwoColumns): ?> grid lg:min-w-[50vw]<?php endif; ?><?php if (!$layoutFull): ?> gap-1 max-h-[65vh] sm:grid-cols-8<?php endif; ?>"
                             <?php if ($layoutFull): ?>:class="{'gap-4 lg:grid-cols-8' : isContainerOpen}"><?php endif; ?>

                            <?php if ($layoutTwoColumns) : ?>
                            <!--    Main Column    -->
                            <div class="col-span-8<?php if (!$layoutFull): ?> sm:order-1<?php endif; ?>"
                                 :class="{
                                <?php if ($layoutFull): ?>
                                'lg:order-1 max-h-[75vh] overflow-y-auto overflow-x-hidden' : isContainerOpen,
                                'lg:col-span-6' : (activeIndex === 'magento_catalog_product')
                                <?php else: ?>
                                'sm:col-span-6' : (activeIndex === 'magento_catalog_product')
                                <?php endif; ?>
                                }">

                                <?php elseif ($filterOnTop) : ?>
                                <div class="max-h-[67vh] overflow-y-auto overflow-x-hidden order-1">
                                    <?php endif; ?>

                                    <!--    Products    -->
                                    <div class="mstInPage__itemList magento_catalog_product"
                                         x-show="!layoutFull || activeIndex === 'magento_catalog_product'">
                                        <?php if (!$layoutFull) : ?>
                                            <p class="<?= $titleCSS ?>">
                                                <span x-text="(searchResults['magento_catalog_product'] && searchResults['magento_catalog_product'].title === 'Products') ? 'We’ve found these for you' : (searchResults['magento_catalog_product'] && searchResults['magento_catalog_product'].title)"></span>
                                                <template x-if="searchResults['magento_catalog_product']">
                                                    <small class="text-black ml-1 mt-4">
                                                        <span
                                                                x-html="searchResults['magento_catalog_product'].totalItems"></span> Results
                                                    </small>
                                                </template>
                                            </p>
                                        <?php endif; ?>

                                        <template x-if="searchResults['magento_catalog_product']">
                                            <template x-if="searchResults['magento_catalog_product'].isMisspell">
                                                <div class="bg-gray-100 p-2">
                                                    <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                                       x-html="searchResults['magento_catalog_product'].textMisspell"></p>
                                                    <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                                       x-html="searchResults['magento_catalog_product'].textCorrected"></p>
                                                </div>
                                            </template>
                                        </template>

                                        <div class="flex flex-row">
                                            <?php if ($layoutFull && ($paginationPosition === ConfigProvider::TOP_AND_BOTTOM)): ?>
                                                <template x-if="searchResults['magento_catalog_product']">
                                                    <div class="mstInPage__pagination w-full pt-2">
                                                        <template x-for="page in searchResults['magento_catalog_product'].pages">
                                                            <?= /* @noEscape */
                                                            $this->fetchView(
                                                                $block->getTemplateFile(
                                                                    'Hyva_MirasvitSearchAutocomplete::in-page/pagination.phtml'
                                                                )
                                                            );
                                                            ?>
                                                        </template>
                                                    </div>
                                                </template>
                                            <?php endif ?>

                                            <?php if ($layoutFull) : ?>
                                                <?php if ($block->isSorterAllowed()) : ?>
                                                    <?= /* @noEscape */
                                                    $this->fetchView(
                                                        $block->getTemplateFile(
                                                            'Hyva_MirasvitSearchAutocomplete::in-page/sorter.phtml'
                                                        )
                                                    );
                                                    ?>
                                                <?php endif ?>
                                            <?php endif; ?>
                                        </div>

                                        <div class="container mx-auto grid grid-cols-2 lg:grid-cols-4 mb-6 p-2 gap-4 <?php if ($layoutFull): ?> md:grid-cols-3 md:pt-6 gap-4<?php else: ?> gap-1<?php endif; ?>">
<!--                                        <div class="container mx-auto flex flex-row mb-6 p-2 overflow-auto">-->
                                            <template x-if="searchResults['magento_catalog_product']">
                                                <template x-for="item in searchResults['magento_catalog_product'].items">
                                                    <div
                                                            class="<?= $itemCSS ?>">
                                                        <?php if ($config['isShowImage']): ?>
                                                            <div class="xl:min-w-48 xl:min-h-48">
                                                                <a :href="`${item.url}`"
                                                                   @click="processItemClick(item)">
                                                                    <img :src="`${item.imageUrl}`"
                                                                         :alt="`${item.name}`" class="my-auto p-2 w-full h-auto object-contain"/>
                                                                </a>
                                                            </div>
                                                        <?php endif ?>
                                                        <div class="mst__product-meta w-full">
                                                            <a :href="`${item.url}`"
                                                               @click="processItemClick(item)"
                                                               class="flex flex-col flex-wrap w-full">
                                                                <div class="flex flex-col w-full p-2">
                                                                    <h4 class="text-sm text-gray-901 font-medium line line-clamp-2 h-10 overflow-hidden font-sen <?php if ($layoutFull): ?> lg:text-lg<?php endif; ?>"
                                                                        x-html="item.name">
                                                                    </h4>
                                                                    <?php if ($config['isShowSku']): ?>
                                                                        <p class="text-gray-600<?php if ($layoutFull): ?> mt-2<?php else: ?> mt-1<?php endif; ?>"
                                                                           x-html="item.sku">
                                                                        </p>
                                                                    <?php endif ?>
                                                                    <?php if ($config['isShowDescription']): ?>
                                                                        <p class="text-gray-600 line-clamp-2<?php if ($layoutFull): ?> mt-2 text-sm<?php else: ?> mt-1 text-xs<?php endif; ?>"
                                                                           x-html="item.description">
                                                                        </p>
                                                                    <?php endif ?>
                                                                    <?php if ($config['isShowRating']): ?>
                                                                        <div class="flex lg:flex-col xl:flex-row<?php if ($layoutFull): ?> mt-3<?php else: ?> mt-1<?php endif; ?>">
                                                                            <div class="flex">
                                                                                <template x-for="i in 5"
                                                                                          x-data="{
                                                                                              brightColor: '#f6e05e',
                                                                                              shadowColor: '#cbd5e0',
                                                                                              star: `M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371
                                                                                                    1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54
                                                                                                    1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1
                                                                                                    0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z`
                                                                                          }">
                                                                                    <div>
                                                                                        <template x-if="item.rating">
                                                                                            <template x-if="i !== item.rateRound">
                                                                                                <svg
                                                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                                                    viewBox="3 0 20 20"
                                                                                                    :style="i < item.rateRound ? 'color: ' + brightColor : 'color: ' + shadowColor"
                                                                                                    fill="currentColor"
                                                                                                    class="w-6 h-6"
                                                                                                    aria-hidden="true"
                                                                                                >
                                                                                                    <path :d="star"/>
                                                                                                </svg>
                                                                                            </template>
                                                                                            <template x-if="i === item.rateRound">
                                                                                                <svg
                                                                                                    xmlns="http://www.w3.org/2000/svg"
                                                                                                    viewBox="3 0 20 20"
                                                                                                    class="w-6 h-6"
                                                                                                    aria-hidden="true"
                                                                                                >
                                                                                                    <defs>
                                                                                                        <linearGradient :id="'partialFill' + (undefined === item.sku_orig ? item.sku : item.sku_orig)">
                                                                                                            <stop offset="0%" :stop-color="brightColor"/>
                                                                                                            <stop :offset="item.fragment" :stop-color="brightColor"/>
                                                                                                            <stop :offset="item.fragment" :stop-color="shadowColor"/>
                                                                                                            <stop offset="100%" :stop-color="shadowColor"/>
                                                                                                        </linearGradient>
                                                                                                    </defs>
                                                                                                    <g :fill="'url(#partialFill' + (undefined === item.sku_orig ? item.sku : item.sku_orig) + ')'">
                                                                                                        <path :d="star"/>
                                                                                                    </g>
                                                                                                </svg>
                                                                                            </template>
                                                                                        </template>
                                                                                        <template x-if="!item.rating">
                                                                                            <svg
                                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                                viewBox="3 0 20 20"
                                                                                                fill="currentColor"
                                                                                                class="w-6 h-6"
                                                                                                aria-hidden="true"
                                                                                                style="color: #cbd5e0;"
                                                                                            >
                                                                                                <path :d="star"/>
                                                                                            </svg>
                                                                                        </template>
                                                                                    </div>
                                                                                </template>
                                                                            </div>
                                                                        </div>
                                                                    <?php endif ?>
                                                                </div>
                                                            </a>
                                                            <div class="mt-auto px-2 w-full pb-2<?php if ($layoutFull): ?> font-sen text-base<?php else: ?> text-sm<?php endif; ?>">
                                                                <?php if ($config['isShowStockStatus']): ?>
                                                                    <span class="text-red mb-2"
                                                                          x-html="item.stockStatus === 2 ? '<?= __('In stock') ?>' : '<?= __('Out of stock') ?>'">
                                                                </span>
                                                                <?php endif ?>
                                                                <?php if ($config['isShowPrice']): ?>
                                                                    <div class="flex flex-row font-sen text-base mt-2"
                                                                         x-show="!item.call_for_price && !item.click_for_price">
                                                                            <span class="text-gray-700 font-semibold justify-end lg:flex-col xl:flex-row"
                                                                                  x-html="item.price">
                                                                            </span>
                                                                    </div>

                                                                    <div class="flex flex-row font-sen text-base mt-2"
                                                                         x-show="item.click_for_price">
                                                                            <span class="text-gray-700 font-semibold justify-end lg:flex-col xl:flex-row">
                                                                                <?= __('Click for Price') ?>
                                                                            </span>
                                                                    </div>

                                                                    <div class="flex flex-row font-sen text-base mt-2"
                                                                         x-show="item.call_for_price">
                                                                            <span class="text-gray-700 font-semibold justify-end lg:flex-col xl:flex-row">
                                                                                <?= __('Call for Price') ?>
                                                                            </span>
                                                                    </div>
                                                                <?php endif ?>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                            </template>
                                            <template x-if="!isLoading && noResults">
                                                <p class="text-lg"><?= $escaper->escapeHtml(__('No results found.')) ?></p>
                                            </template>
                                        </div>

                                        <?php if ($layoutFull && ($paginationPosition !== ConfigProvider::DISABLE)): ?>
                                            <template x-if="searchResults['magento_catalog_product']">
                                                <div class="mstInPage__pagination w-full pb-2">
                                                    <template x-for="page in searchResults['magento_catalog_product'].pages">
                                                        <?= /* @noEscape */
                                                        $this->fetchView(
                                                            $block->getTemplateFile(
                                                                'Hyva_MirasvitSearchAutocomplete::in-page/pagination.phtml'
                                                            )
                                                        );
                                                        ?>
                                                    </template>
                                                </div>
                                            </template>
                                        <?php endif ?>
                                    </div>

                                    <!--    Categories, Pages, Posts, Articles (Full page layout)   -->
                                    <?php if ($layoutFull) : ?>
                                    <template x-for="(searchResult, identifier) in searchResults">
                                        <template
                                                x-if="!!searchResult.totalItems && ('magento_catalog_product' !== identifier)">
                                            <div class="mstInPage__itemList"
                                                 :class="`${identifier}`"
                                                 x-show="activeIndex === identifier">
                                                <template x-if="searchResult.isMisspell">
                                                    <div class="bg-gray-100 p-2">
                                                        <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                                           x-html="searchResult.textMisspell"></p>
                                                        <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                                           x-html="searchResult.textCorrected"></p>
                                                    </div>
                                                </template>
                                                <?php if ($paginationPosition === ConfigProvider::TOP_AND_BOTTOM): ?>
                                                    <div class="mstInPage__pagination w-full pt-2">
                                                        <template
                                                                x-for="page in searchResult.pages">
                                                            <?= /* @noEscape */
                                                            $this->fetchView(
                                                                $block->getTemplateFile(
                                                                    'Hyva_MirasvitSearchAutocomplete::in-page/pagination.phtml'
                                                                )
                                                            );
                                                            ?>
                                                        </template>
                                                    </div>
                                                <?php endif ?>

                                                <div class="container mx-auto grid grid-cols-1 mb-6 p-2 gap-4 md:grid-cols-2 md:pt-6">
                                                    <template x-for="item in searchResult.items">
                                                        <div
                                                                class="<?= $itemCSS ?>"
                                                        <div class="mstInPage__item">
                                                            <a :href="`${item.url}`"
                                                               @click="processItemClick(item)"
                                                               class="flex flex-row flex-wrap w-full">
                                                                <div class="my-2 flex flex-wrap">
                                                                    <span
                                                                            class="mx-4 font-bold lg:text-lg text-blue-500 leading-loose cursor-pointer"
                                                                            x-html="('magento_search_query' !== identifier) ? item.name.replaceAll(`<i>`, `<i class='mx-2'>`) : item.query_text">
                                                                    </span>
                                                                </div>
                                                            </a>
                                                        </div>
                                                </div>
                                        </template>
                                </div>

                                <?php if ($paginationPosition !== ConfigProvider::DISABLE): ?>
                                    <div class="mstInPage__pagination w-full pb-2">
                                        <template
                                                x-for="page in searchResult.pages">
                                            <?= /* @noEscape */
                                            $this->fetchView(
                                                $block->getTemplateFile(
                                                    'Hyva_MirasvitSearchAutocomplete::in-page/pagination.phtml'
                                                )
                                            );
                                            ?>
                                        </template>
                                    </div>
                                <?php endif ?>
                            </div>
                </template>
                </template>
                <?php endif; ?>

                <?php if ($layoutTwoColumns) : ?>

            </div>

        <!--    Left Column / Main Column Bottom    -->
        <div class="col-span-8<?php if ($layoutFull): ?> max-h-[70vh]<?php endif; ?>"
        :class="{
                                 <?php if ($layoutFull): ?>
                                     'lg:col-span-2' : (activeIndex === 'magento_catalog_product')
                                 <?php else: ?>
                                     'sm:col-span-2' : (activeIndex === 'magento_catalog_product')
                                 <?php endif; ?>
                                 }"
        x-show="!!activeIndex">

        <?php elseif ($filterOnTop) : ?>

        </div>

        <!--    Main Column Top    -->
            <div x-show="activeIndex === 'magento_catalog_product'">

                <?php endif; ?>

                <?php if (!$layoutFull) : ?>
                    <!--    Categories, Pages, Posts, Articles (1|2-column layout)   -->
                    <template x-for="(searchResult, identifier) in searchResults">
                        <template
                                x-if="!!searchResult.totalItems && ('magento_catalog_product' !== identifier)">
                            <div class="mb-6">
                                <p class="<?= $titleCSS ?>">
                                    <span x-text="searchResult.title === 'Categories' ? 'Are you looking for ' : searchResult.title"></span>
                                    <small class="text-black ml-1 mt-4">
                                        <span x-html="searchResult.totalItems"></span> Results
                                    </small>
                                </p>
                                <template x-if="searchResult.isMisspell">
                                    <div class="bg-gray-100 p-2">
                                        <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                           x-html="searchResult.textMisspell"></p>
                                        <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
                                           x-html="searchResult.textCorrected"></p>
                                    </div>
                                </template>
                                <div class="px-2">
                                    <template x-for="item in searchResult.items">
                                        <a :href="`${item.url}`">
                                            <div class="my-2 flex flex-wrap">
                                                               <span
                                                                       class="m-1 font-bold font-sen text-smleading-loose cursor-pointer"
                                                                       x-html="item.name.includes('›') ? item.name.split('›').pop() : item.name">
                                                                </span>
                                            </div>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </template>

                    <!-- Show popular suggestions when no categories match in two-column layout -->
                    <template x-if="layoutTwoColumns && !Object.keys(searchResults).some(identifier => identifier !== 'magento_catalog_product' && searchResults[identifier].totalItems > 0) && blockConfig.popularSearches">
                        <div class="mb-6">
                            <p class="<?= $titleCSS ?>">
                                <?= $escaper->escapeHtml(__($config['popularTitle'])) ?>
                            </p>
                            <div class="my-3 flex flex-wrap  flex-col px-2">
                                <?php foreach ($config['popularSearches'] as $search) : ?>
                                    <span x-on:click="hotSearchClickEvent"
                                          class="m-1 hover:bg-gray-300 rounded-full px-2 font-bold font-sen text-smleading-loose cursor-pointer">
                                        <?= $escaper->escapeHtml(__($search)) ?>
                                    </span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </template>
                <?php elseif ($filterInSidebar || $filterOnTop) : ?>
                    <!--    Layered Navigation    -->
                    <div class="<?php if ($filterInSidebar): ?>mstInPage__sidebar hidden lg:block max-h-[73vh] overflow-x-hidden<?php elseif ($filterOnTop): ?>mstInPage__top overflow-x-auto my-4<?php endif; ?> overflow-y-auto"
                         x-show="activeIndex === 'magento_catalog_product'">
                        <?php $rangeInputCSS = 'absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer'; ?>
                        <div class="mstInPage__bucketList flex<?php if ($filterInSidebar): ?> flex-col<?php elseif ($filterOnTop): ?> py-1<?php endif; ?>">
                            <template x-for="bucket in buckets">
                                <div class="mstInPage__bucket text-gray-600 pr-2 <?php if ($filterOnTop): ?> pb-2 grow-1 shrink-0<?php endif; ?>"
                                     :class="{ '_expanded': bucket.isExpanded }">
                                    <div @click="bucket.expand" class="mstInPage__bucketLabel card p-1">
                                                        <span class="justify-between items-center font-semibold uppercase font-sen text-base p-2 tracking-wider cursor-pointer"
                                                              x-text="bucket.label">
                                                        </span>
                                        <div class="mstInPage__bucketExpand p-1 transition-transform transform duration-300 ease-in-out rotate-180 float-right"
                                             :class="{ 'rotate-180': bucket.isExpanded }">
                                            <?= $heroicons->chevronDownHtml('stroke-gray-400') ?>
                                        </div>
                                    </div>
                                    <div<?php if ($filterOnTop): ?> class="card absolute min-w-48 max-h-[45vh] overflow-y-auto p-2 z-10" <?php endif; ?> x-show="bucket.isExpanded">
                                        <template x-if="bucket.code === 'price'">
                                            <div class="p-2 pt-4 flex justify-center items-center<?php if ($filterOnTop): ?> w-60<?php endif; ?>">
                                                <div class="relative max-w-xl w-full">
                                                    <div>
                                                        <input type="range"
                                                               :step="step"
                                                               :min="priceMin"
                                                               :max="priceMax"
                                                               x-on:input="minPriceTrigger"
                                                               x-on:mouseup="doSearch(query)"
                                                               x-model="priceFrom"
                                                               class="<?= $rangeInputCSS ?>">
                                                        <input type="range"
                                                               :step="step"
                                                               :min="priceMin"
                                                               :max="priceMax"
                                                               x-on:input="maxPriceTrigger"
                                                               x-on:mouseup="doSearch(query)"
                                                               x-model="priceTo"
                                                               class="<?= $rangeInputCSS ?>">
                                                        <div class="relative z-10 h-2">
                                                            <div class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-gray-200">
                                                            </div>
                                                            <div class="absolute z-20 top-0 bottom-0 rounded-md bg-blue-600"
                                                                 :style="'right:'+maxThumb+'%; left:'+minThumb+'%'">
                                                            </div>
                                                            <div class="absolute z-30 w-6 h-6 top-0 left-0 bg-blue-600 rounded-full -mt-2"
                                                                 :style="'left: '+minThumb+'%'">
                                                            </div>
                                                            <div class="absolute z-30 w-6 h-6 top-0 right-0 bg-blue-600 rounded-full -mt-2"
                                                                 :style="'right: '+maxThumb+'%'">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="flex justify-between items-center py-5">
                                                        <div>
                                                            <input type="text"
                                                                   x-on:blur="minPriceTrigger; doSearch(query)"
                                                                   x-model="priceFrom"
                                                                   class="p-1 border border-gray-200 rounded w-20 text-center">
                                                        </div>
                                                        <div>
                                                            <input type="text"
                                                                   x-on:blur="maxPriceTrigger; doSearch(query)"
                                                                   x-model="priceTo"
                                                                   class="p-1 border border-gray-200 rounded w-20 text-center">
                                                        </div>
                                                    </div>
                                                </div>
                                        </template>

                                        <template x-if="bucket.code !== 'price'">
                                            <div class="mstInPage__bucketItemList">
                                                <template x-for="item in bucket.items">
                                                    <div @click="selectItem(bucket.code, item.key)"
                                                         :class="{ '_active': item.isActive }"
                                                         class="mstInPage__bucketItem flex flex-row my-1 flow-root">
                                                        <input type="checkbox"
                                                               :checked="item.isActive"
                                                               class="appearance-none border-b border-gray-300 rounded-sm h-5 w-5 cursor-pointer <?php if ($filterOnTop): ?>mx-2<?php else: ?> mx-4<?php endif; ?>">
                                                        <span x-text="item.label"
                                                              class="max-w-xs overflow-hidden text-gray-700 truncate cursor-pointer whitespace-nowrap select-none font-sen text-base">
                                                                        </span>
                                                        <i x-text="item.count"
                                                           class="block bg-gray-100 text-gray-600 font-semibold text-xs text-center rounded-sm mx-2 mt-1 py-0.5 h-5 w-5 float-right">
                                                        </i>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if ($layoutTwoColumns || $filterOnTop) : ?>
            </div>
        <?php endif; ?>

        </div>

        <?php if (!$layoutFull) : ?>
            <!--    Bottom    -->
            <div class="p-3 w-full h-full order-2 col-span-8 bg-primary">
                <div class="flex items-center justify-center">
                    <a :href="numberResultsUrl">
                        <p class="text-white transition duration-300 font-bold text-sm"
                           x-html="numberResults"></p>
                    </a>
                </div>
            </div>
        <?php endif; ?>
    </div>
    </template>

    <template x-if="noResults">
        <div class="bg-gray-100 p-2">
            <p class="font-sen text-base leading-normal transition appearance-none text-gray-800 lg:text-lg"
               x-html="noResultsText"></p>
        </div>
    </template>
</div>
</div>
</div>
</div>

<script>
    function initMirasvitSearch() {
        return {
            //initialize Variables
            showHotSearch:     false,
            hasSearchResults:  false,
            noResults:         false,
            isLoading:         false,
            isOpen:            false,
            isContainerOpen:   false,
            blockConfig:       <?= json_encode($config); ?>,
            layoutFull:        <?= (int)$layoutFull ?>,
            layoutTwoColumns:  <?= (int)$layoutTwoColumns ?>,
            page:              1,
            xhttp:             false,
            noResultsText:     '',
            numberResults:     '',
            numberResultsUrl:  '',
            order:             '<?= $escaper->escapeHtmlAttr($block->getDefaultOrder()) ?>',
            direction:         'desc',
            isActiveDirection: false,
            filterList:        new Map(),
            buckets:           [],
            collapses:         [],
            priceFrom:         -1,
            priceTo:           -1,
            priceMin:          -1,
            priceMax:          -1,
            minThumb:          0,
            maxThumb:          0,
            step:              1,
            generalUrl:        '',
            searchResults:     {},
            activeIndex:       'magento_catalog_product',
            highlightedParams: ['name', 'sku', 'description'],
            currentRequestUrl: '',

            hotSearchClickEvent: function (event) {
                const hotSearchClick = event.currentTarget.innerText;
                let searchElement = document.querySelector('#search');
                searchElement.value = hotSearchClick;
                searchElement.click();
                this.doSearch(hotSearchClick);
                searchElement.focus();
            },

            preOpen: function () {
                if (this.layoutFull) {
                    document.querySelector('body').classList.add('mstInPage');
                }

                this.isContainerOpen = true;
            },

            openSearch: function () {
                if (document.getElementById("search").value.length >= this.blockConfig.minSearchLength) {
                    this.isOpen = true;
                    this.showHotSearch = false;
                } else {
                    this.showHotSearch = true;
                    this.hasSearchResults = false;
                }
            },

            startSearch: function (e) {
                this.isOpen = !!e;
            },

            closeSearch: function () {
                this.isOpen = false;

                <?php if ($filterOnTop): ?>
                this.buckets.forEach(bucket => {this.collapses.push(bucket.code)});
                this.setBuckets(this.searchResults, this.activeIndex);
                <?php endif; ?>

                if (this.layoutFull) {
                    document.querySelector('body').classList.remove('mstInPage');
                }

                this.isContainerOpen = false;
                this.searchOpen = false;

                //const event = new Event("search-open");
                //window.dispatchEvent(event);
            },

            setNoResultsText(text) {
                if (!text) {
                    return;
                }

                this.noResultsText = text;
            },

            goToPage: function (page) {
                this.page = page;
                this.doSearch(this.query);
            },

            // The doSearch() method must be called separately for compatibility with other modules
            setOrder($el) {
                this.order = $el.value;
                this.doSearch(this.query);
            },

            asc() {
                this.isActiveDirection = true;
                this.direction = 'asc';
                this.doSearch(this.query);
            },

            desc() {
                this.isActiveDirection = true;
                this.direction = 'desc';
                this.doSearch(this.query);
            },

            doSearch: function (query) {

                // Min search length
                if (query.length < this.blockConfig.minSearchLength) {
                    this.showHotSearch = true;
                    this.isLoading = false;
                    this.hasSearchResults = false;
                    this.noResults = false;

                    return;
                } else {
                    this.showHotSearch = false;
                    this.hasSearchResults = true;
                    this.noResults = false;
                }

                if (this.query !== query) {
                    this.query = query;
                    this.filterList = new Map();
                }

                let self = this;

                let url = this.blockConfig.url.replace(/\/$/, '')
                    + '/?q=' + encodeURIComponent(this.query)
                    + '&store_id=' + this.blockConfig.storeId
                    + '&cat=false'
                    + '&limit=' + this.blockConfig.limit
                    + '&p=' + this.page
                    + '&order=' + this.order
                    + '&direction=' + this.direction
                    + '&is_active_dir=' + this.isActiveDirection
                    + '&buckets[0]=category_ids'
                    + '&currency=' + this.blockConfig.currency
                ;

                <?php if ($layoutFull): ?>
                if ((this.priceFrom !== -1) && (this.priceTo !== -1)) {
                    url += `&filters[price][]=${this.priceFrom}_${this.priceTo}`;
                }

                if (this.filterList.size) {
                    for (const [key, value] of this.filterList) {
                        value.forEach(filter => {
                            url += `&filters[${key}][]=${filter}`;
                        });
                    }
                }
                <?php endif; ?>

                const generalUrl = url;

                if (generalUrl === self.generalUrl) {
                    this.isLoading = false;

                    return;
                } else {
                    this.isLoading = true;
                    url += '&index=' + this.activeIndex;
                }

                // AJAX for searchautocomplete/ajax/suggest/
                if (this.xhttp) {
                    try {
                        this.xhttp.abort();
                    } catch {

                    }
                }

                this.currentRequestUrl = url;

                this.xhttp = new XMLHttpRequest();
                let xhttp = this.xhttp;

                xhttp.open("GET", url, true);
                xhttp.setRequestHeader("Content-Type", "application/json");

                xhttp.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        // Response from ajax call in JSON.
                        const response = JSON.parse(this.responseText);

                        self.searchResults = {};

                        for (const index in response.indexes) {
                            if (response.indexes[index].items.length > 0) {
                                const res = response.indexes[index];

                                if ('magento_catalog_product' === res.identifier) {
                                    res.items.forEach(function (item, index) {
                                        self.highlightedParams.forEach(param => {
                                            res.items[index][param + '_orig'] = item[param];
                                            res.items[index][param] = highlightMatch(item[param], query);
                                        });
                                    });
                                }

                                self.searchResults[res.identifier] = res;
                            }
                        }

                        if (
                            !self.searchResults['magento_catalog_product']
                            && (Object.values(self.searchResults).length > 0)
                        ) {
                            self.activateSection(Object.keys(self.searchResults)[0]);
                        }

                        if (self.searchResults['magento_catalog_product']
                        ) {
                            self.searchResults['magento_catalog_product'].items.forEach((item, key) => {
                                if (item.rating) {
                                    let rate = item.rating/20;
                                    let fragment = (rate - Math.floor(rate))*100;

                                    if (fragment <= 0) {
                                        fragment = 100
                                    }

                                    self.searchResults['magento_catalog_product'].items[key].rateRound
                                        = (Math.ceil(rate));

                                    self.searchResults['magento_catalog_product'].items[key].fragment
                                        = fragment + '%';
                                }
                            });

                            const sorter = self.searchResults['magento_catalog_product'].sorter;
                            if (!!sorter && sorter.direction !== self.direction) {
                                self.direction = sorter.direction;
                            }
                        }

                        self.setBuckets(self.searchResults, self.activeIndex);
                        <?php if ($filterOnTop): ?>
                        self.buckets.forEach(bucket => {
                            self.collapses.push(bucket.code);
                        });
                        self.setBuckets(self.searchResults, self.activeIndex);
                        <?php endif; ?>

                        self.isLoading = false;
                        self.noResults = false;
                        self.numberResults = response.textAll;
                        self.numberResultsUrl = response.urlAll;
                        self.generalUrl = generalUrl;

                        if (response.noResults) {
                            self.setNoResultsText(response.textEmpty);
                            self.hasSearchResults = false;
                            self.noResults = true;
                        }

                        self.saveRequest();

                        self.isActiveDirection = false;
                    }
                };
                xhttp.send();
            },

            saveRequest() {
                let searchRequestUrl = this.currentRequestUrl;
                let config = this.blockConfig;

                let selectedFilters = {};

                for (const bucketCode in this.buckets) {
                    let currentBucketCode = this.buckets[bucketCode].code;
                    let currentBucketFilterList = this.filterList.get(currentBucketCode);

                    if (!currentBucketFilterList) {
                        continue;
                    }

                    let bucketSelectedFilters = [];
                    currentBucketFilterList.forEach((categoryId) => {
                        bucketSelectedFilters.push(categoryId);
                    })

                    selectedFilters[currentBucketCode] = bucketSelectedFilters;
                }

                let requestData = {
                    requestUrl: searchRequestUrl,
                    filtersData: selectedFilters,
                    activeIndex: this.activeIndex
                };

                let requestDataJson = JSON.stringify(requestData)

                if (this.blockConfig.isKeepLastSearchRequest) {
                    localStorage.setItem(config.localStorageFields.prevRequestField, requestDataJson);
                }
            },

            setBuckets(indexes, indexIdentifier) {
                this.buckets = [];

                for (const key in indexes) {
                    if (key !== indexIdentifier) {
                        continue;
                    }

                    const idx = indexes[key];

                    for (const bucketKey in idx.buckets) {
                        const bucket = idx.buckets[bucketKey]
                        let bucketItems = [];

                        if (bucket.code === 'price') {
                            this.priceMin = this.priceMin === -1 || this.priceMin > bucket.min ? bucket.min : this.priceMin;
                            this.priceMax = this.priceMax === -1 || this.priceMax < bucket.max ? bucket.max : this.priceMax;
                            this.priceFrom = this.priceFrom === -1 ? this.priceMin : this.priceFrom;
                            this.priceTo = this.priceTo === -1 ? this.priceMax : this.priceTo;
                            this.minPriceTrigger();
                            this.maxPriceTrigger();
                        }

                        for (const itemKey in bucket.items) {
                            const item = bucket.items[itemKey];

                            let isActive = this.filterList.get(bucket.code)?.includes(item.key) || false;

                            bucketItems.push({...item, isActive, select: () => this.selectItem(bucket.code, item.key)});
                        }

                        if (bucketItems.length > 0 || bucket.code === 'price') {
                            this.buckets.push({
                                ...bucket,
                                items:      bucketItems,
                                isExpanded: !this.collapses.includes(bucket.code),
                                expand:     () => this.toggleCollapse(bucket.code)
                            });
                        }
                    }
                }
            },

            selectItem(bucketCode, key, triggerSearch = true) {
                let filterList = this.filterList;
                let filterItems = filterList.get(bucketCode) || [];

                if (bucketCode === 'price') {
                    filterList.set(bucketCode, [key]);
                } else {
                    let index = filterItems.indexOf(key);

                    if (index >= 0) {
                        filterItems.splice(index, 1);
                        filterItems.length > 0 ? filterList.set(bucketCode, filterItems) : filterList.delete(bucketCode);
                    } else {
                        filterItems.push(key);
                        filterList.set(bucketCode, filterItems);
                    }
                }

                this.filterList = new Map(filterList);

                if (triggerSearch) {
                    this.doSearch(this.query);
                }
            },

            processItemClick(item) {
                localStorage.setItem(this.blockConfig.localStorageFields.isRestorePrevRequestFlag, "1")
                localStorage.setItem(this.blockConfig.localStorageFields.isRefererAutocompleteFlag, "1")
                window.location.href = item.url;
            },

            toggleCollapse(code) {
                <?php if ($filterOnTop): ?>
                this.buckets.forEach(bucket => {
                    if (bucket.code !== code) {
                        this.collapses.push(bucket.code);
                    }
                });
                <?php endif; ?>

                if (this.collapses.includes(code)) {
                    this.collapses = this.collapses.filter(c => c !== code);
                } else {
                    this.collapses.push(code);
                }

                this.setBuckets(this.searchResults, this.activeIndex);
            },

            minPriceTrigger() {
                if (!this.isNumeric(this.priceFrom) || (this.priceFrom < this.priceMin)) {
                    this.priceFrom = this.priceMin;
                }
                this.priceFrom = Math.min(this.priceFrom, this.priceTo - this.step);
                this.minThumb = ((this.priceFrom - this.priceMin) / (this.priceMax - this.priceMin)) * 100;
            },

            maxPriceTrigger() {
                if (!this.isNumeric(this.priceTo) || (this.priceTo > this.priceMax)) {
                    this.priceTo = this.priceMax;
                }
                this.priceTo = Math.max(this.priceTo, this.priceFrom + this.step);
                this.maxThumb = 100 - (((this.priceTo - this.priceMin) / (this.priceMax - this.priceMin)) * 100);
            },

            isNumeric(obj) {
                return !isNaN(parseFloat(obj)) && isFinite(obj);
            },

            activateSection(identifier) {
                if (identifier !== this.activeIndex) {
                    this.activeIndex = identifier;
                    this.goToPage(1);
                }
                this.saveRequest()
            },

            processAddToCart(addToCartElement, linkToCart) {
                if (this.blockConfig.isAjaxCartButton) {
                    fetch(linkToCart + '?isAjax=1', {
                        method:  'GET',
                        headers: {
                            'Accept':       'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            let messageElement = document.createElement('div');
                            messageElement.className = `to_cart_message message ${data.success ? 'success' : 'error'} font-sen text-smp-2`;
                            messageElement.innerHTML = data.message;

                            addToCartElement.closest('.mst__product-meta').prepend(messageElement);

                            /**
                             * Reload Section data
                             */
                            hyva.setCookie('mage-cache-sessid', '', -1, true);
                            window.dispatchEvent(new CustomEvent("reload-customer-section-data"));

                            setTimeout(() => {
                                let messageElement = addToCartElement.closest('.mst__product-meta').querySelector('.to_cart_message');
                                if (messageElement) {
                                    messageElement.remove();
                                }
                            }, 5000);
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                } else {
                    addToCartElement.setAttribute('href', linkToCart);
                    addToCartElement.click();
                }

                return false;
            }
        }
    }

    function showPrevSearch(el) {
        let mirasvitSearch = Alpine.$data(document.getElementById('search'));
        let config = mirasvitSearch.blockConfig;
        let localStorageFields = mirasvitSearch.blockConfig.localStorageFields;
        let prevRequestFlag = !!(localStorage.getItem(localStorageFields.isRestorePrevRequestFlag));
        let prevRequest = localStorage.getItem(localStorageFields.prevRequestField);

        if (!prevRequest) {
            return;
        }

        prevRequest = JSON.parse(prevRequest);

        function delay(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function triggerEvents() {
            await delay(20);
            window.dispatchEvent(new Event('search-open'));

            await delay(100);
            window.dispatchEvent(new Event('search-open'));

            await delay(150);
            window.dispatchEvent(new Event('search-open'));

            await delay(300);
            window.dispatchEvent(new Event('search-open'));
        }

        if (config.isKeepLastSearchRequest
            && window.performance
            && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD
            && prevRequestFlag) {

            let prevRequestParams = new URL(prevRequest.requestUrl).searchParams;
            let prevRequestFiltersData = prevRequest.filtersData;

            /**
             * Search init, pass the query into the input, select active index
             *
             * @type {string}
             */
            mirasvitSearch.$refs.searchInput.value = prevRequestParams.get('q');

            /**
             * Passing filters
             */
            Object.entries(prevRequestFiltersData).forEach((filter) => {
                filter[1].forEach((key) => {
                    mirasvitSearch.selectItem(filter[0], key, false);
                })
            });


            /**
             * Passing the rest of data
             */
            mirasvitSearch.query = prevRequestParams.get('q');
            mirasvitSearch.page = prevRequestParams.get('p');
            mirasvitSearch.order = prevRequestParams.get('order');
            mirasvitSearch.direction = prevRequestParams.get('direction');

            /**
             * Make the search to be open
             */
            mirasvitSearch.searchOpen = true;

            /**
             * Trigger required for search events
             */
            triggerEvents();

            if (!prevRequest.activeIndex) {
                return;
            }
            mirasvitSearch.activateSection(prevRequest.activeIndex);
        }
    }

    function restrictPrevSearch () {
        if (window.performance
            && (!(window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD))
        ) {
            let localStorageFields = <?= /* @noEscape */ $block->jsonEncode($block->getLocalStorageFields()) ?>;

            if (localStorage.getItem(localStorageFields.isRefererAutocompleteFlag)) {
                localStorage.setItem(localStorageFields.isRefererAutocompleteFlag, '');
                return;
            }

            if (!(localStorage.getItem(localStorageFields.isRefererAutocompleteFlag))) {
                localStorage.setItem(localStorageFields.prevRequestField, '');
                localStorage.setItem(localStorageFields.isRestorePrevRequestFlag, '')
            }
        }
    }

    restrictPrevSearch();
</script>

<?= $block->getChildHtml('mst.highlight.search') ?>

<style>
    input[type=range]::-webkit-slider-thumb {
        pointer-events: all;
        width: 24px;
        height: 24px;
        -webkit-appearance: none;
        /* @apply w-6 h-6 appearance-none pointer-events-auto; */
    }

    body.mstInPage {
        position: absolute;
        overflow-y: hidden;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    body.mstInPage #search {
        --tw-ring-shadow: none;
    }

    body.mstInPage #search::-webkit-search-cancel-button,
    body.mstInPage #search::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

    body.mstInPage #search-content {
        z-index: 1000;
    }
    .mst__product-meta .price-box .special-price .price-label {display: none;}
    .mst__product-meta .price-box .special-price .price {font-size: 20px;}
    .mst__product-meta .price-box .old-price .price {text-decoration: line-through;}
</style>
